EmberJS View - Determines whether all views for children have been displayed.

Question

Scenario:

• Displays a collection of notes (asynchronous loading)
• Two views: NoteView representing a list of notes and NoteOnListView representing a single note.
• I need to run some code (masonry.js) to put them in, but this requires that all the notes are visualized first, he needs to know the number and properties of these children.

I have a template, notes.hjs:

{{#each note in controller}} {{view App.NoteOnListView}} {{/each}} 

And views:

 App.NotesView = Ember.View.extend({ didInsertElement: function() { console.log('the list has been rendered'); } }); App.NoteOnListView = Ember.View.extend({ didInsertElement: function() { console.log('a note has been inserted'); }, afterRender: function() { console.log('a note has been rendered'); } }); 

Console output:

 the list has been rendered XHR finished loading: "http://localhost:3000/notes" a note has been rendered a note has been inserted a note has been rendered a note has been inserted // ... a note has been rendered a note has been inserted // This is where I need to run code! 

I have some possible solutions to this problem, but they all look hacked. Is there a good way that NotesView can wait for all its children to be displayed?

Answer 1

If you change your strategy to a subclass of Ember.CollectionView , you can use the following approach to receive notification of the completion of the rendering of your child views.

 App.CV = Ember.CollectionView.extend( { itemViewClass : Ember.View.extend( { templateName : 'item' } ), onChildViewsChanged : function( obj, key ){ var length = this.get( 'childViews.length' ); if( length > 0 ){ Ember.run.scheduleOnce( 'afterRender', this, 'childViewsDidRender' ); } }.observes( 'childViews' ), childViewsDidRender : function(){ //child views have finished rendering! } } ); 

Here is an example that demonstrates this technique in Ember 1.0 RC2.

For more information about Ember.run.scheduleOnce, see the docs .