Ember.Select example

by teddyzeenny

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">
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="search">
 {{view Ember.Select class="my_custom_class"
       contentBinding="controller.content"
       optionValuePath="content.id"
       optionLabelPath="content.firstName"
       selectionBinding="controller.selectedName"}}


{{#if selectedB}}

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


{{else}}

    <p>Select option B</p>

{{/if}}

</script>

JavaScript

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

App.Router.map(function() {
    this.route('search');
});

App.IndexRoute = Em.Route.extend({
    redirect: function() {
        this.transitionTo('search');
    }
});

App.SearchRoute = Em.Route.extend({
    setupController: function(controller, model) {
        controller.set('model', model);
        controller.set('selectedName', model.findProperty('firstName', 'B'));
    },
    model: function() {
        return [
            {firstName: "Any",  id: 0},
            {firstName: "A",    id: 1},
            {firstName: "B",    id: 2},
            {firstName: "C",    id: 3},
            {firstName: "D",    id: 4},
            {firstName: "E",    id: 5}
        ];
    }
});


App.SearchController = Ember.ArrayController.extend({
  selectedName: null,
  selectedB: function() {
    return this.get('selectedName.id') == 2 ;
  }.property('selectedName')

});