ember.js - How to bind value form input select to attribute in controller

Question

I try to bind value from input select to attribute "selectedValue" in controller.

This is app.js

Food = Ember.Application.create();

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"}));

This is index.html

{{#collection
    contentBinding="Todos.todosController"
    tagName="select"
    itemClassBinding="content.isDone"}}
  {{content.title}}
{{/collection}}

Output look like this

<select id="ember180" class="ember-view">
  <option id="ember192" class="ember-view">
    <script id="metamorph-0-start" type="text/x-placeholder"></script>
    a
    <script id="metamorph-0-end" type="text/x-placeholder"></script>
  </option>
  <option id="ember196" class="ember-view">
    <script id="metamorph-1-start" type="text/x-placeholder"></script>
    b
    <script id="metamorph-1-end" type="text/x-placeholder"></script>
  </option>
  <option id="ember200" class="ember-view">
    <script id="metamorph-2-start" type="text/x-placeholder"></script>
    c
    <script id="metamorph-2-end" type="text/x-placeholder"></script>
  </option>
</select>

I have no idea how to add value to option and how to binding selected value back to controller. Is this possible to do in Emberjs?

Answer 1

Ember now has a built-in Select view.

You can find it in the latest Ember.js build here: http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js

Here's an example usage:

var 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({
    person: null
});

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

Your template would look like:

{{view Ember.Select
       contentBinding="App.peopleController"
       selectionBinding="App.selectedPersonController.person"
       optionLabelPath="content.fullName"
       optionValuePath="content.id"}}

Again, here's a jsFiddle example: http://jsfiddle.net/ebryn/zgLCr/