With Ember and Ember-data: How to setup callback when a store is finished loading, and/or when an associated view is finished re-rendering?

Question

I'm using Ember and Ember-data to load a few hundred objects from a REST API, using a findAll call within a custom adapter. I have an ArrayController.content referencing the findAll, and then use the recently added Ember.Select to display the objects in a select widget/dropdown-menu. I need to run a function on the select widget once it is fully rendered with all the objects (each object being an option of the select) - in particular, the Chosen.js library.

Because it takes a little while (2-4 seconds) to handle the few hundred objects in the select, using callbacks on the events Ember.Select.didInsertElement and Ember.ArrayController.contentDidChange don't quite work; they both fire too soon. So is there another event, or another approach, which could be used instead?

Answer 1

DS.RESTAdapter.findQuery is the answer! In contrast to the DS.RESTAdapter.findAll method, it creates and returns DS.AdapterPopulatedModelArray, which has it's own isLoaded properly that you can observe anywhere in your app!

For example:

App.store = DS.Store.create({
    adapter: DS.RESTAdapter.create()
});

App.set('MyItemList', App.store.findQuery(App.Item, 'homepageList'));

App.MyView = Ember.View.extend({
    refresh: function () {
        console.log('finished loading custom list');
    }.observes('App.MyItemList.isLoaded')
});