Ember.Select example

HTML

<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.content"
         selectionBinding="App.selectedPersonController.personId"
         optionLabelPath="content.fullName"
         optionValuePath="content.id"}}

  <p>Selected: {{App.selectedPersonController.person.fullName}}
    (ID: {{App.selectedPersonController.person.id}})</p>
</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({
    personId: null,
    
    person: function() {
        var personId = this.get('personId');
        console.log(personId);
        person = App.peopleController.content.findProperty("id", personId);
        return person;
    }.property('personId').cacheable()
});


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'})
    ]
});