0

I have a controller which loads asynchronous data into the Ember main store.
While it's loading, it displays a loading spinner. After it's done loading it displays the data.

My problem is that I would also like to inject jQuery logic/bindings once the data has been loaded and the template rendered.

The question is: what hooks get called when templates get rendered/updated?

I tried observing when the data is loaded, but it doesn't reliably inject the jQuery after the template is rendered (see below):

controllers/index.js

export default Ember.Controller.extend({
    listReady: function() {
       Ember.run.next(this, function() {
       // jQuery logic
        })

    }.observes('model.stations.content.isLoaded'),
})

routes/index.js

export default Ember.Route.extend({
    setupController: function(controller, model) {
        var that = this;
        controller.set('content', {
            stations: that.store.find('station'),
            others: that.store.find('other')
        }); 
    }
});

templates/index.js

{{#if model.stations.content.isLoaded}}
{{!--display the data--}}
{{else}}
{{!--display a loading spinner--}}
{{/if}}
blisstdev
  • 633
  • 4
  • 13

1 Answers1

2

There are 2 things - Before model hook in route and aftermodel hook. If you want to perform something after your data is loaded in your model object then you can use aftermodel hook.

You can read more on these hooks here - http://guides.emberjs.com/v1.10.0/routing/asynchronous-routing/

For Loading spinner thing - You don't need to write logic explicitly in your handlerbars(template), you can do that in route. Ember only provides loading route. You can refer below link for more information

http://guides.emberjs.com/v1.10.0/routing/loading-and-error-substates/

Neha Narlawar
  • 229
  • 3
  • 13
  • I appreciate your answer, Neha, but I do not want to use the model hooks because my models are asynchronous, and are also very large, and I don't want the user to see a blank screen while they are loading. This is why I have them declared in the setupController hook of the route. http://guides.emberjs.com/v1.10.0/routing/specifying-a-routes-model/#toc_asynchronously-loading-models – blisstdev Apr 14 '15 at 21:56
  • If I am understanding it correctly then your requirement is just to show user some busy cursor until your operation is finished. If this is the case then for this you can use loading route to show busy cursor. You dont need to write any logic in template. If you want to go in "Ember way" then logic should not be there in template, templates are just for UI part. Ember provides a default implementation of the loading process that implements loading substate. Check example given on site http://guides.emberjs.com/v1.10.0/routing/loading-and-error-substates/ – Neha Narlawar Apr 14 '15 at 23:20
  • So what if I have a number of models loading into one route (an admin route). Each model populates a certain place on the page. Do I have to make a complete duplicate of that template except with loading cursors, or is there some way to switch out views, or use multiple outlets or something? – blisstdev Apr 16 '15 at 02:54
  • Yes you can use multiple views/Outlets. You can refer this question, this will answer your question - http://stackoverflow.com/questions/17837128/what-controls-where-embers-loading-route-is-displayed – Neha Narlawar Apr 17 '15 at 01:07