Question

我试图让一个简单的belongsTo关系与HTML select元素一起使用。

我的应用记录了学生。每个学生都被分配到一个类别。

我有一个类别模型：

import DS from "ember-data";

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

一个学生模型 - 在许多其他事物中 - 属于一个类别。

import DS from "ember-data";

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

我想允许用户在模板中选择学生类别，以便我的路线加载到类别对象列表中：

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

我的模板包含此内容（编辑：我使用"content.id"作为最初声明的值"content"，但它似乎对问题没有影响）：

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

我的期望是允许我从列表中选择一个项目，它会相应地更新我的模型类别。

实际发生的事情是列表有效但如果我更改了选择，则select元素变为空白。

生成的HTML如下所示：

<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>

我是否正确完成了这项工作？我缺少一种模式吗？

编辑：

我尽可能地在jsbin中复制了这个，但我遇到的问题并没有发生。非常奇怪，选择元素正确填充，它甚至似乎正确更新类别。唯一的问题是，如果我更改原始选择，则选择框将变为空白。

Answer 1

我希望看到id引用的唯一属性，例如optionValuePath，而不是整个对象。

而不是optionValuePath="content"，而是optionValuePath="content.id"：

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

使用ember选择麻烦

1 个答案: