Ember.Select example

by ekidd

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" data-template-name="application">
    <h1>Test App</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="search">

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

{{#if selectedB}}

    <p>Select option B</p>

{{else}}

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

{{/if}}

</script>

JavaScript

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

App.Router.map(function () {
    this.resource('search',  { path: "/" });
});

App.SearchRoute = Ember.Route.extend({
    model: function () {
        return [
            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})
        ];
    }
});

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

  selectedB: function() {
    // Be careful! If you use Ember Data, the key will be '2', not 2.
    return this.get('selectedName.id') === 2;
  }.property("selectedName.id")
});