在计算属性中使用this.store.query（）

Question

我已经构建了一个自定义下拉元素，我正在尝试使用它来显示以下内容：

{{drop-down items=types selectionChanged="typeChanged"}}

{{drop-down items=meters selectionChanged="meterChanged"}}

在我的控制器中，我按如下方式设置值：

types: [
  { value: "latest", name: "Latest Widget" },
  { value: "max", name: "Maximum Widget" },
  { value: "average", name: "Average Widget" },
],

meters: Ember.computed(function() {
  var meters = this.store.query('meter', { account_id: 2 });
  return meters;
}),

两者的值都显示正确：

<select id="ember826" class="ember-view form-control">
  <option value="">Please select a widget type...</option>
  <option value="latest">Latest Widget</option>
  ...
</select>

<select id="ember849" class="ember-view form-control">
  <option value="2">Meter 1</option>
</select>

我的下拉组件使用以下内容计算出所选值：

change: function(event) {
  var items = this.get('items');
  var index = event.target.selectedIndex;
  var selected = items ? items[index - 1] : null;
  console.log(selected); // error occurs here
  this.sendAction('selectionChanged', selected);
}

现在这适用于“类型”，但对于“米”，选择的是“未定义”。

然后我在该行之前添加了console.log(JSON.stringify(items));，并且对于米的更改，它给了我以下错误：

  

未捕获的TypeError：将循环结构转换为JSON

如果我将{{log types}}和{{log meters}}添加到模板中，我会得到以下内容，这可能会对其有所了解：

类型：

（米）：

我注意到后者将它包含在几层'内容'键中，所以承诺未能正确解决？

修改

如果我在路由中使用this.store.query，然后在模型{{log}}中使用它，那么它将包含在一个“内容”键中，Ember可以正确解释该键。是否有任何理由在控制器中执行此操作应该创建额外的一个？

Answer 1

使用objectAt访问Ember Collection中的项目。

change: function(event) {
  var items = this.get('items');
  var index = event.target.selectedIndex;
  var selected = items ? items.objectAt(index - 1) : null;
  console.log(selected); // error occurs here
  this.sendAction('selectionChanged', selected);
}