Ember.Select example

by anshulguleria

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
  {{view Ember.Select
         contentBinding="App.peopleController"
         selectionBinding="App.selectedPersonController.person"
         optionLabelPath="content.fullName"
         optionValuePath="content.id"}}

  <p>Selected: {{App.selectedPersonController.person.fullName}}
    (ID: {{App.selectedPersonController.person.id}})</p>
   {{view App.CheckBoxContainerView }}
</script>
<script type="text/x-handlebars" data-template-name="check-box">
  {{#view Ember.Checkbox}}
    Check me!
  {{/view}}
</script>

JavaScript

window.App = Ember.Application.create();

App.Person = Ember.Object.extend({
    id: null,
    firstName: null,
    lastName: null,
    
    fullName: function() {
        return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName').cacheable()
});

App.selectedPersonController = Ember.Object.create({
    person: null
});


App.peopleController = Ember.ArrayController.create({
    content: [
        App.Person.create({id: 1, firstName: 'Yehuda', lastName: 'Katz'}),
        App.Person.create({id: 2, firstName: 'Tom', lastName: 'Dale'}),
        App.Person.create({id: 3, firstName: 'Peter', lastName: 'Wagenet'}),
        App.Person.create({id: 4, firstName: 'Erik', lastName: 'Bryn'})
    ]
});

App.CheckBoxContainerView = Ember.View.extend({
  templateName: 'check-box'
})