Ember Action - {{action showClinic clinic}} generates link with 'undefined'

Question

I'm working with Ember, Ember-data and Rails.

When I create a link in the handlebars view, it links out to /clinic/undefined. I'm trying to have the View code create a link that looks like: http://localhost:3000/#/clinic/1 but instead looks like: http://localhost:3000/#/clinic/undefined.

Any ideas why and how to fix it?

View:

<a {{action showClinic content.clinic href=true}}>Click here</a>

Router:

root: Ember.Route.extend({
showClinic: Ember.Route.transitionTo('clinic'),
showDoctor: Ember.Route.transitionTo('doctor'),

index: Ember.Route.extend({
  route: '/',
  connectOutlets: function(router) {
    router.get('applicationController').connectOutlet('main');
  }
}),

clinic: Ember.Route.extend({
  route: '/clinic/:clinic_id',
  connectOutlets: function(router, clinic) {
    router.get('applicationController').connectOutlet('clinic', clinic);
    router.get('clinicController').connectOutlet('doctors', clinic.get('doctors'));
  }
}),

doctor: Ember.Route.extend({
  route: '/doctor/:doctor_id',
  connectOutlets: function(router, doctor) {
    router.get('applicationController').connectOutlet('doctor', doctor);
  }
})

})

Model:

App.Doctor = DS.Model.extend({
  name: DS.attr('string'),
  clinic: DS.belongsTo('App.Clinic')
});

JSON:

{
  doctor: {
    id: 1,
    clinic_id: 1,
    name: "Dr. Who"
  }
}

is {{content.clinic}} defined if you try that in your template ? — sly7_7, Oct 30 '12 at 21:02
Yep. If I insert `{{content.clinic}}` I get `` and `{{content.clinic.name}}` gives `Smallville Clinic` as expected. — Chris Nolet, Oct 31 '12 at 00:39
Sorry if this sounds like a pain, but could you throw this into a jsFiddle? I've had the exact same problem many times before, and the source of it usually isn't obvious until I can actually change things and see what happens. I have a few instincts that I'd like to test. — dmzza, Oct 31 '12 at 14:04

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

This happened to me too and is probably an issue related to serialize and deserializing in the router. The data for the clinic is not yet loaded when you are deserializing the id and you get a return value of undefined for the id attribute. The solution for this is to implement the promises pattern in the deserialize method for each of the states.

You can take a look at the following links for more information: https://github.com/emberjs/ember.js/issues/1268#issuecomment-7893886 - implementation of the promises pattern.

Emberjs async routing - for more information and another alternative

edited May 23 '17 at 11:55

Community

1
1

answered Nov 01 '12 at 05:35

Gaurav Shetty

461
4
10

That was it. I had to create a clinic route with two children: index and doctor. I connected 'clinic' to the applicationController only once (in the parent route), then 'doctor' to the clinicController in the child route. I just had to make the routes cascaded the same way that the object relationships cascade. Thanks! – Chris Nolet Nov 01 '12 at 06:15

Ember Action - {{action showClinic clinic}} generates link with 'undefined'

1 Answers1