CODEWITHSUNDEEP
javascriptember.jsember-data
Graeme Stuart
Graeme Stuart

Reputation: 6063

Trouble with ember select

I am trying to get a simple belongsTo relationship working with an HTML select element.

My app records students. Each student is assigned to a category.

I have a category model:

import DS from "ember-data";

export default DS.Model.extend({
  code: DS.attr('string'),
  description: DS.attr('string')
});

And a student model which - amongst many other things - belongs to a category.

import DS from "ember-data";

export default DS.Model.extend({
  //...
  category: DS.belongsTo('category', {async: true}),
  //...
});

I want to allow the user to select the students category in a template so my route loads in a list of category objects:

import Ember from "ember";

export default Ember.Route.extend({
  model: function(params) {
    return this.store.find('student', params.student_id);
  },
  setupController: function(controller, model) {
    this._super(controller, model);
    //...
    controller.set('categories', this.store.find('category'));
    //...
  }
});

My template includes this (edit: I use "content.id" for the value path not "content" as originally stated but it seems to have no impact on the problem):

<label>Category:&nbsp;</label>
{{view "select" 
   content=categories 
   optionValuePath="content.id" 
   optionLabelPath="content.description" 
   selection=category}}

My expectation is that this will allow me to choose an item from the list and it will update my models category accordingly.

What actually happens is that the list works but if I change the selection the select element goes blank.

The resulting HTML is like this:

<select id="ember955" class="ember-view ember-select">
  <option id="ember1199" class="ember-view" value="16">Category A</option>
  <option id="ember1202" class="ember-view" value="17">Category B</option>
  <option id="ember1205" class="ember-view" value="18">Category C</option>
  <option id="ember1208" class="ember-view" value="19">Category D</option>
  <option id="ember1211" class="ember-view" value="20">Category E</option>
  <option id="ember1214" class="ember-view" value="21">Category F</option>
  <option id="ember1217" class="ember-view" value="22">Category G</option>
</select>

Have I done this correctly? Is there a pattern I am missing?

EDIT:

I have replicated this as best as I can in a jsbin but the problem I have is not happening. Its very odd, the select element is populated correctly and it even seems to update the category correctly. The only problem is that if I change the original selection the select box goes blank.

Upvotes: 0

Views: 102

Answers (1)

rossta
rossta

Reputation: 11504

I would expect to see a unique property, such as id, referenced for optionValuePath instead of the entire object.

So instead of optionValuePath="content", it would be optionValuePath="content.id":

<label>Category:&nbsp;</label>
{{view "select" 
   content=categories 
   optionValuePath="content.id" 
   optionLabelPath="content.description" 
   selection=category}}

Upvotes: 1

Related Questions