Emberjs - How to wait until the template is fully displayed before access to its children

Question

Is there a way to wait until the template is fully displayed before accessing its children through the view, for example using jquery?

didInsertElement seems to work as expected for me. I need to add an extra half delay before the template is fully built. The template iterates over the array in the controller and creates multiple divs. these are divs that are not available immediately, even when I override didInsertElement.

Answer 1

I do not know how you insert these children, but one way to do this is:

didInsertElement: function(){ if (this.$().find(".myAwesomeChildViews").length > 0) { // <-- adapt this to your needs // my childViews are inserted } else { Ember.run.next(this, function() { this.didInsertElement(); }); } } 

The important thing is that didInsertElement () will continue to be called until the validation is true.

---

Even better, you can reorganize it as follows:

 Ember.View.reopen({ didInsertElement: function() { this._super(); this.setIsRendered(); }, setIsRendered: function() { if (!!this.$()) { this.set('isRendered', true); } else { Ember.run.next(this, function() { this.setIsRendered(); }); } }, }); 

And then, in your opinion:

 App.MyView = Ember.View.extend({ areMyChildViewsRendered: function() { return this.get('childViews').everyProperty('isRendered'); }.property(' [e-mail] ') }); 

Answer 2

I recently added something to Ember that will make it more elegant: the afterRender . See this commit , specifically the test for an example use.