After Render

by ethan_selzer

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<h3>Notes</h3>
<p>For Ember.Select, observe content to setup afterRender handler. Observing childViews did not work the way it does on collection views in this version of Ember.</p>
<hr>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{ outlet }}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h2>Index Template</h2>
    {{view App.CV contentBinding="model.colors"}}
    {{view App.SV 
    contentBinding="model.colors" 
    optionValuePath="content.color" 
    optionLabelPath="content.color"}}
</script>

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

CSS

body {
    padding: 2em;
}
    h3{font-weight: bold;}

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( this.$() );
          console.log( 'childViewsDidRender - count of paragraphs: ', this.$( 'p' ).length );         
    }
} );

App.SV = Ember.Select.extend( {
    didInsertElement : function(){
        this.on( 'change', this, 'onSelectionChanged' );
    },
    
    onContentChanged : function(){
        if( this.get( 'content.length' ) ){
            Ember.run.scheduleOnce( 'afterRender', this, 'onAfterRender' );
        }
    }.observes( 'content' ),
    
    onAfterRender : function(){
        console.log( 'select after render - options length', this.$( 'option' ).length ); 
    },
    
    onSelectionChanged : function(){
        console.log( 'onSelectionChanged', this.$( 'option' ).length );  
    },
    
    onValueChanged : function(){
        console.log( 'onValueChanged', this.$( 'option' ).length );
    }.observes( 'value' )
} );

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