Take the 2-minute tour ×

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!

share|improve this question

4 Answers 4

up vote 9 down vote accepted

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.

share|improve this answer
Yes, this is what I ended up doing. The last didInsertElement call is really the callback I was looking for. –  jede May 28 '12 at 8:11

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.

share|improve this answer
Hi jdar, about the 'didFoo' callbacks, how do you use it? Because my view is printing an object, but when the view is rendered the object is not loaded in the store yet. So i would like to know in my view, when the object has been rendered in my template... –  ThomasDurin Sep 10 '12 at 19:14

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() {
    }, 2000);

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

    // Call the superclass's `ready` method.
share|improve this answer

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.

share|improve this answer

Your Answer


