Select View

by pangratz

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.1.min.js"></script>
<script type="text/x-handlebars" >
    {{#view Food.SelectView contentBinding="Food.foodController"
        valueBinding="Food.appsController.selectedValue"}}
        <select>
            {{#each content}}
                <option {{bindAttr value="value"}} >{{title}}</option>
            {{/each}}
        </select>
    {{/view}}
    
    selected: {{view Ember.TextField valueBinding="Food.appsController.selectedValue"}}{{Food.appsController.selectedValue}}
</script>

JavaScript

Food = Ember.Application.create();

Food.SelectView = Ember.View.extend({
    value: null,
    
    valueChanged: function(){
        this.$('select').val( this.get('value') );
    }.observes('value'),
    
    didInsertElement: function(){
        var self = this;
        this.$('select').change(function(){
            var val = $('select option:selected').val();
            self.set('value', val);
        });
    }
});

Food.appsController = Ember.Object.create({
  selectedValue: ""
});

Food.Todo = Ember.Object.extend({
  title: null,
  value: null
});

Food.foodController = Ember.ArrayProxy.create({
  content: []
});

Food.foodController.pushObject(Food.Todo.create({title:"a", value:"1"}));
Food.foodController.pushObject(Food.Todo.create({title:"b", value:"2"}));
Food.foodController.pushObject(Food.Todo.create({title:"c", value:"3"}));