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"
  }
}

Answer 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