Ember 无法保留下拉值

Question

我正在使用 Ember 2.5.0。在我的应用程序中，我使用 ember-select-list 插件创建了一个带有下拉菜单的页面。

我可以呈现下拉菜单，但无法保留下拉菜单的值。每当我 select 该值时，我都会在 chrome 控制台中收到以下异常：

Assertion Failed: Cannot call get with 'id' on an undefined object

请找到以下代码，供参考：

模板：

{{select-list content=roles 
              optionValuePath="role"
              optionLabelPath="role" 
              value=role 
              action=(action (mut role))}}

Route.js

export default Ember.Route.extend({
   model(){
      return Ember.RSVP.hash({
         books : this.store.findAll("book"),
         roles : this.store.findAll("role")
    });
},
setupController(controller,model){
   controller.set('users',model.books);
   controller.set('roles',model.roles);
 }
});

型号

export default DS.Model.extend({
    role:DS.attr()
});

在路由器中，当我传递 Array(roles: this.store.findAll("role").toArray()) 而不是 model 时，我可以保留该值，但它在传递模型时抛出错误。

任何人，你能帮我解决这个问题吗？

Answer 1

ember-select-list documentation and unit test 表示 {{select-list}} 助手上的 content 属性需要 array。

这就是为什么 Ember.RSVP.hash 似乎失败了，正如 hash 所期望的，而 returns 是 object，这是 ember-select-列表未配置为使用。

您应该使用 Ember.RSVP.all 而不是 hash，正如 all 所期望的那样，并且 returns 和 array 应该可以工作。

我创建了一个 Ember Twiddle example 来演示。

如果您不想使用 ember-select-列表，您可能会发现仅使用 Ember's each helper 构建您自己的 select 列表会更容易，像这样：

<select onchange={{action "selectRole" value="target.value"}}>
  {{#each roles as |role| }}
    <option value="{{ role }}" label={{ role }}>
      {{ role }}
    </option>
  {{/each}}
</select>

Answer 2

我建议您使用 ember-power-select 插件。

对于你的问题，你可以试试这个，

setupController(controller,model){
   controller.set('users',model.books);
   controller.set('roles',model.roles.toArray());
 }

如果这不起作用，请告诉我

Ember 无法保留下拉值

Ember unable to retain dropdown value

ember.js

ember-select

ember-cli