CODEWITHSUNDEEP
ember.js
jede
jede

Reputation: 2461

Is there a way to get a callback when Ember.js has finished loading everything?

I am building an Ember.js app and I need to do some additional setup after everything is rendered/loaded.

Is there a way to get such a callback? Thanks!

Upvotes: 7

Views: 10479

Answers (5)

Kevin Bullaughey
Kevin Bullaughey

Reputation: 2576

There are also several functions defined on Views that can be overloaded and which will be called automatically. These include willInsertElement(), didInsertElement(), afterRender(), etc.

In particular I find didInsertElement() a useful time to run code that in a regular object-oriented system would be run in the constructor.

Upvotes: 10

Paul
Paul

Reputation: 1220

I simply put this into the Application Route 

actions: {
    loading: function(transition, route) {

        this.controllerFor('application').set('isLoading', true);

        this.router.on('didTransition', this, function(){
          this.controllerFor('application').set('isLoading', false);
        });
    }
}

And then anywhere in my template I can enable and disable loading stuff using {{#if isLoading}} or I can add special jQuery events inside the actual loading action.

Very simple but effective.

Upvotes: 1

LoremFooBar
LoremFooBar

Reputation: 135

You can use the ready property of Ember.Application.

example from http://awardwinningfjords.com/2011/12/27/emberjs-collections.html:

// Setup a global namespace for our code.
Twitter = Em.Application.create({

  // When everything is loaded.
  ready: function() {

    // Start polling Twitter
    setInterval(function() {
      Twitter.searchResults.refresh();
    }, 2000);

    // The default search is empty, let's find some cats.
    Twitter.searchResults.set("query", "cats");

    // Call the superclass's `ready` method.
    this._super();
  }
});

Upvotes: 6

ondrejbartas
ondrejbartas

Reputation: 117

You can use jQuery ajax callbacks for this:

$(document).ajaxStart(function(){ console.log("ajax started")})
$(document).ajaxStop(function(){ console.log("ajax stopped")})

This will work for all ajax requests.

Upvotes: 3

jdar
jdar

Reputation: 312

LazyBoy's answer is what you want to do, but it will work differently than you think. The phrasing of your question highlights an interesting point about Ember.

In your question you specified that you wanted a callback after the views were rendered. However, for good 'Ember' style, you should use the 'ready' callback which fires after the application is initialized, but before the views are rendered.

The important conceptual point is that after the callback updates the data-model you should then let Ember update the views.

Letting ember update the view is mostly straightforward. There are some edge cases where it's necessary to use 'didFoo' callbacks to avoid state-transition flickers in the view. (E.g., avoid showing "no items found" for 0.2 seconds.)

If that doesn't work for you, you might also investigate the 'onLoad' callback.

Upvotes: 5

Related Questions