Ember Latest - Select Menu

by ethan_selzer

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="form">
    <h1>hello form</h1>
    {{view Ember.TextField viewName="pet"}}
    {{view App.MySelect
        viewName = "pets"            
        contentBinding = "App.petController"
        optionLabelPath = "content.pet"
        optionValuePath = "content.id"      
        valueBinding = "App.petController.selected"
        selectionBinding = "App.petController.selectedContent"
    }}
    
    {{view Ember.Select
        viewName = "morePets"            
        contentBinding = "App.petController"
        optionLabelPath = "content.pet"
        optionValuePath = "content.id"      
        valueBinding = "App.petController.selected"
        selectionBinding = "App.petController.selectedContent"
    }}
        
</script>

CSS

body {
  padding: 2em;   
}

JavaScript

App = Ember.Application.create();

App.petController = Ember.ArrayController.create({
    content : [
        {
            pet: 'dog',
            id: 1},
        {
            pet: 'cat',
            id: 2
        }
    ],
    
    selected : 2,
    
    selectedContent : null,
    
    addPet : function(){
     this.get( 'content' ).pushObject( { pet : 'fish', id : 3 } );   
    },
    
    removePet : function(){
        this.get( 'content' ).shiftObject();
    }
});

App.MySelect = Ember.Select.extend( {
    change : function( evt ){
        console.log( evt );
        evt.stopPropagation();
        this.get( 'parentView' ).selectChanged( evt );
    }        
} );

App.formView = Ember.View.create({
    templateName: 'form',
    
    petObserver : function(){
        this.pet.set( 'value', App.petController.selectedContent.pet );
    }.observes( 'App.petController.selectedContent' ),
    
    selectChanged : function( evt ){
        console.log( 'parent view', evt );        
    },
    
    change : function( evt ){
        console.log( 'parent view bubble', evt );        
    }
                                 
});

$(function() {
    App.formView.append();
});