Ember.Select example

by fortm

HTML

<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.2.js"></script>
<script type="text/x-handlebars">

 {{view Ember.Select class="my_custom_class"
       contentBinding="App.SearchController"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       selectionBinding="App.SearchController.selectedName"}}


{{#if App.SearchController.selectedB}}

      <p>Selected: {{App.SearchController.selectedName.firstName}}
    (ID: {{App.SearchController.selectedName.id}})</p>


{{else}}

    <p>Select option B</p>

{{/if}}

</script>

JavaScript

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

App.SearchController = Ember.ArrayController.create({
  selectedName: null,

  content: [
    Ember.Object.create({firstName: "Any", id: 0}),
    Ember.Object.create({firstName: "A", id: 1}),
    Ember.Object.create({firstName: "B",    id: 2}),
    Ember.Object.create({firstName: "C",    id: 3}),
    Ember.Object.create({firstName: "D",    id: 4}),
    Ember.Object.create({firstName: "E",    id: 5}),
  ],

  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }

});