CODEWITHSUNDEEP
ember.js
Klaasvaak
Klaasvaak

Reputation: 5644

Ember.Select binding sets to undefined

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:

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

Upvotes: 2

Views: 383

Answers (2)

Zoltan
Zoltan

Reputation: 4966

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

Upvotes: 1

Meori Oransky
Meori Oransky

Reputation: 688

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.

Upvotes: 2

Related Questions