Ember - Drop-Down Select

RC1, bootstrap

by fangyang

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://gist.github.com/nrion/5085211/raw/e13c63ba8b0fa9f46804521dcb9c8f0b2f0476be/datepicker.js"></script>
<link rel="stylesheet" href="https://gist.github.com/nrion/5085230/raw/b7065b7d5c45b7c475e7b98934175e5892a0f3b3/datepicker.css">
<script type="text/x-handlebars">
    {{outlet}}    
</script>
<script type="text/x-handlebars" data-template-name="people">
    <p>Index View</p>
    <ul>
        {{#each item in controller}}
        <li {{bindAttr class="item.isActive" }}> {{item.firstName}} :: {{item.isActive}}</li>
        {{/each}}
    </ul>
    <hr/>
    {{ view Ember.Select contentBinding="content"        
        optionValuePath="content.id"
        optionLabelPath="content.firstName"
        valueBinding="dropDownVal" }}
    {{ controller.dropDownVal}}
    
    <hr/> 
    
    {{ controller }}
</script>

CoffeeScript

App = Ember.Application.create
    LOG_TRANSITIONS: true
    
window.App = App

App.PeopleView = Em.View.extend
    templateName: 'people'
    
App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,
    isActive: ( ->
               console?.log("DD:"[email protected]('controller.dropDownVal') )
               @.get('id')[email protected]('controller.dropDownVal')
               ).property('id', 'controller.dropDownVal')
    fullName: ( ->
        return this.get('firstName') + " " + this.get('lastName');
    ).property('firstName', 'lastName').cacheable()
});

App.IndexController = Em.ArrayController.extend
    title: 'abc'
    onDate: '3/5/2013'
    dropDownVal: 1
    content: []
    
    
App.IndexRoute = Em.Route.extend
    enter: ->
        console?.log('index route')
    setupController: (controller, model) ->
        ct= [
            App.Person.create({id: 1, firstName: 'Bob', lastName: 'Roz'}),
            App.Person.create({id: 2, firstName: 'Tom', lastName: 'Jones'}),
            App.Person.create({id: 3, firstName: 'Jim', lastName: 'Blue'}),
            App.Person.create({id: 4, firstName: 'Eric', lastName: 'Zimm'})
        ]
        
        controller.set('content', ct)
        
    

App.IndexView = Em.View.extend
    templateName: 'people'
    message: 'indexview'

    
App.TextField = Em.TextField.extend 
  didInsertElement: ->
    this.$().focus();
    @_super()