CODEWITHSUNDEEP
jquerytemplatesember.jscontroller
blisstdev
blisstdev

Reputation: 643

Ember.js: How to observe whether template DOM element has been rendered

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

Upvotes: 0

Views: 630

Answers (1)

Neha Narlawar
Neha Narlawar

Reputation: 229

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/

Upvotes: 2

Related Questions