Run code once after all views are fully displayed in Ember.js

Question

Something like a document ready, but after all the renderings of Ember rendering

I am doing this right now with an override in ApplicationView didInsertElement, which seems to work so far:

App.ApplicationView = Em.View.extend({ didInsertElement: function() { // Do your magic. } }); 

I am wondering if this is the right way for an Ember document, or if Ember has more native support for this simple and very common thing.

Answer 1

You can easily add a "post render" hook by opening the View base class again and adding it to the render queue.

Here is 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 } }); 

Answer 2

didInsertElement is the right place, but if you want to make sure that the rendering queue is completely empty, you can 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 this helps.

Answer 3

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