Ember Ember.Select binding

Question

I am trying to create a simple page where I loop through a list of phone numbers associated with a Contact. Each phone number has a "number" and a "phone_type".

I've created a View that extends Ember.Select that populates itself with a the list of phone_types. Other than that, is's just a plain Ember.Select:

export default Ember.Select.extend({

        thestore: '',
        optionLabelPath: 'content.code',
        optionValuePath : 'content.code',

    didInsertElement: function() {

        var vtype = this.get("valuetype");

        var vls =  this.get("thestore").filter('valuelist', { type: 'phone_type' }, function(vv) {
             return vv.get("type") == vtype;
        });

        this.set("content",vls);
    }
});

Here is my code in the template using the "valuelist" view defined above.

    {{#each phonenumber in model}}
     <tr>
        <td>   {{phonenumber.number}}</td>
        <td>{{phonenumber.phone_type}}</td>
        <td>{{view 'valuelist' thestore=store  valuetype='phone_type' 
                selection="{{phonenumber.phone_type}}" 
                value="phonenumber.phone_type" }}</td>
     </tr>
{{/each}}

What I cannot figure out is how to bind the value in the dropdown to the field in each model record I am iterating through in the template. You can see I've tried various things in the code above without any luck.

panta82 panta82 · Accepted Answer · 2014-06-08T11:42:23

The property you need is value. However, in your attempts above, you were filling it with literal strings. This happens when you provide a value wrapped in quotes ('...' or "..."). What you need is to give it an identifier, which is value without quotes. So, try this:

{{#each phonenumber in model}}
 <tr>
    <td>{{phonenumber.number}}</td>
    <td>{{phonenumber.phone_type}}</td>
    <td>{{view 'valuelist' thestore=store  valuetype='phone_type' 
            value=phonenumber.phone_type }}</td>
 </tr>
{{/each}}

As an aside, this is a very unortodox way of doing things. A view shouldn't be tied to a store. Also, I think this will cause your select to be unusable while the values load asynchronously (and potentially crash your app if there is an error).

A conventional way to do this would be to load the list of all phone_types in your setupController hook and then provide it as an argument to Select view.

Controller:

App.MyRoute = Ember.Route.extend({
  //...
  setupController: function (c, m) {
    c.set("model", m);
    c.set("phoneTypes", [
      "home", "office"
      // or whatever, load it from store in model hook and setup here
    ]);
  }
});

Template:

{{#each phonenumber in model}}
 <tr>
    <td>{{phonenumber.number}}</td>
    <td>{{phonenumber.phone_type}}</td>
    <td>{{view Ember.Select
          content=phoneTypes
          value=phonenumber.phone_type }}</td>
 </tr>
{{/each}}

Ember Ember.Select binding

1 Answers