Ember-Data objectAt () does not work to get the first result

Question

I fill two templates with data: the first template contains detailed information about the model (called Slider), and the second template has a list of the last 5 sliders.

The problem is that when I use objectAt (0) for the result, the model does not apply to the template correctly. Another list template is populated. I mean the following:

App.IndexRoute = Ember.Route.extend({ setupController: function() { var sliders = App.Slider.find({ limit: 5 }); this.controllerFor('indexSlider').set('model', sliders.objectAt(0)); this.controllerFor('indexSliders').set('model', sliders); // this works fine and loads the data into the template } }); 

This code does not work. However, it works when I replace the indexSlider model with the following:

 App.IndexRoute = Ember.Route.extend({ setupController: function() { var sliders = App.Slider.find({ limit: 5 }); this.controllerFor('indexSlider').set('model', App.Slider.find(52)); this.controllerFor('indexSliders').set('model', sliders); } }); 

... where 52 is the identifier of the first result. Does this make me think that objectAt is really not working properly for rendering the model on the template, or am I just doing it wrong?

Answer 1

You need to wait for find load before trying to access the first object. You can use the didLoad event:

 App.IndexRoute = Ember.Route.extend({ setupController: function() { var sliders = App.Slider.find({ limit: 5 }); sliders.one('didLoad', this, function() { this.controllerFor('indexSlider').set('model', sliders.objectAt(0)); }); this.controllerFor('indexSliders').set('model', sliders); } });