Execute code once after all views have completely rendered in Ember.js

Question

Something like document ready, but after all Ember views rendering

I am doing this right now with an override on ApplicationView didInsertElement, which seems to be

Answer 1

App.ApplicationView = Ember.View.extend({
  afterRender: function () {
    Ember.run.next(this, function () {
      // This will run one time, after the full initial render.
    });
  }
});

Answer 2

The didInsertElement is the right place, but if you want to be completely sure your render queue is completely flushed you could also listen to the afterRender event, something like this:

App.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 'processChildElements');
  },

  processChildElements: function() {
    // do here what you want with the DOM
  }
});

Hope it helps.

Answer 3

You can easily add a "post render" hook by reopening the base View class and adding it into the render queue.

Here's some code to show you how:

Ember.View.reopen({
    didInsertElement : function() {
        this._super();
        Ember.run.scheduleOnce('afterRender', this, this.didRenderElement);
    },
    didRenderElement : function() {
        // Override this in your View's
    }
});