Schedule After Render

by fangyang

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.2/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="index">
    {{view App.CV contentBinding="content"}}
</script>

<script type="text/x-handlebars" data-template-name="item">
    <p>{{view.content.color}}</p>
</script>

CSS

body {
  padding: 2em;   
}

JavaScript

App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend( {
    model : function(){
         return App.Colors.find();
    }
} );
App.CV = Ember.CollectionView.extend( {
    itemViewClass : Ember.View.extend( {
        templateName : 'item'
    } ),
    
    didInsertElement : function(){
        console.log( 'didInsertElement - count of paragraphs: ', this.$( 'p' ).length );
    },
    
    onChildViewsChanged : function( obj, key ){
        var length = this.get( 'childViews.length' );
        if( length > 0 ){
            Ember.run.scheduleOnce( 'afterRender', this, 'childViewsDidRender' );
        }
    }.observes( 'childViews' ),
                
    childViewsDidRender : function(){
        console.log( 'childViewsDidRender - count of paragraphs: ', this.$( 'p' ).length );         
    }
} );

App.Colors = Ember.ArrayProxy.extend();
App.Colors.reopenClass( {
    find : function(){
        var model = this.create( {
            content : Ember.A([])
        } );
        window.setTimeout( function(){
           model.set( 'content', Ember.A( [
               Ember.Object.create( { color : 'green' } ),
               Ember.Object.create( { color : 'blue' } ),
               Ember.Object.create( { color : 'red' } ),
               Ember.Object.create( { color : 'orange' } )
          ] ) );
        }, 500 );
        
        return model;
    }
} );