Question

I got completely stuck, here is the fiddle. In the example I want to be able to load additional data when i visit url /cars/details, but I can’t figure out how can I do that.

here is my models:

App.Cars = DS.Model.extend({
    name: DS.attr('string'),
    details: DS.belongsTo('App.Details')
});

App.Details = DS.Model.extend({
    name: DS.attr('string'),
    color: DS.attr('string'),
    wheels: DS.attr('string')
});

And here shortened FIXTURES

App.Cars.FIXTURES = [{
  id: 1,
  name: 'Alfa Romeo',
  details: 1
}];

App.Details.FIXTURES = [{
  id: 1,
  name: 'Alfa Romeo',
  color: 'Red',
  wheels: '14'
}];

Any ideas how to make that happen, I’m sure I’m missing something very simple, just don’t know what.

Edit

the interesting thing is, that on original project if I reload on a url which suppose to show details, I see the details, but that’s happens only once. I printed the model to console:

App.DetailsRoute = Ember.Route.extend({
  model: function(params) {
    console.log(params) // prints once only if loaded app was loaded to this url
    return App.Details.find(params.table_id);
  },
  setupController: function(controller, model) {
    console.log(model) // prints every time you click on a car
    controller.set('content', model);
  }
});

Answer 1

There are two things that make your code not working:

You are passing the car to the {{linkTo 'details' car}} helper.
Consequently, the car will be the model of the DetailsRoute (and the DetailsController too), but you want the car.details instead:

{{#each car in controller}}
    {{#linkTo 'details' car.details}}
        {{car.name}}
    {{/linkTo}}
{{/each}}

The other thing that does not work is that your fixtures id are integers.

Replace them by a string and it will work, as you can see in this JSFiddle.