Ember.Select binding sets to undefined

Question

I have got an Ember.Select in my template. The options are populated from content I get from a server. All the options are rendered fine. But when I want to show the selected value it will set the attribute to undefined.

Template:

{#with this as context}}
  {{#each}}
    <tr>
      <td>{{name}}</td>
      <td>{{view Ember.Select content=context.types optionValuePath='content.id' optionLabelPath='content.name' value=type}}</td>
    </tr>
  {{/each}}
{{/with}}

Controller:

types: function() {
    return this.store.find('myType');
}.property()

Model I'm looping through:

DS.Model.extend({
  name: DS.attr(),
  type: DS.attr() // <= this is the selected type (id)
});

MyType model:

DS.Model.extend({
    name: DS.attr()
});

This code will render all the options in the select element. Like so:

<select>
  <option value="1">My first type</option>
  <option value="2">My second type</option>
</select>

The following things I don't understand:

• When I inspect my data (ember inspect add-on) the property type is set to undefined.
• But when I select an option the type property is set with the right id.
• When I remove the value=type the type attributes have the correct value when I inspect the data.

jsbin: http://emberjs.jsbin.com/cugetoxoyira/3/edit

Answer 1

You had 2 problems:

1. Your select content was bounded to an unfulfilled Ember-Data promise (which is an odd creature by itself). You can bypass that by if-ing on the isFulfilled property.
2. The IDs for such a model are strings, not integers.

look here for the fixes.

Hope that helps.

Answer 2

Using a model promise in controller is antipattern. Route's model and afterModel hook wait until a Promise is resolved and fulfilled. So all your data from store and from json API gonna be properly downloaded and setup when your controller and your template rendering.

The "Ember Way" solution is to setup both model in current Route's setupController hook, so you don't have to use a hack in your template.

http://emberjs.jsbin.com/cugetoxoyira/44/edit

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return Ember.RSVP.hash({
      stuffs: this.store.find('stuff'),
      types: this.store.find('type')
    }); 
  },

  setupController: function(controller, model) {
    controller.set('types', model.types);        
    controller.set('model', model.stuffs); 
  }
});