Question

我试图在EmberJS中迭代一个对象，但是我得到了{{#each}}必须在数组上使用的错误。

那么有一种迭代对象的方法吗？

我从模型中获取数据并在控制器中构建对象以进行渲染。

控制器：

listData: function () {
  // data = {foos: {foo: 'bar'}, bars: {bar: 'foo'}}

  return data; 
}

模板：

{{#each listData}}
  {{this.foo}} // Bar
  {{this.bar}} // Foo

我已经看过这个标记为重复的问题，但该问题涉及模型属性和Ember.Object()并将结果转换为数组。我需要将它保存为对象（普通的JS对象）。并在手柄模板中迭代这个。

Answer 1

在Ember v2.0.0-beta.1 中，您可以使用{{#each-in listData as |key value|}} <li>Value.foo:`{{value.foo}}` Value.bar:`{{value.bar}}`</li> {{/each-in}}帮助程序迭代对象属性。例如，以下代码：

listData

对于您提供的listData: Ember.computed(function () { return {foos: {foo: 'bar'}, bars: {bar: 'foo'}}; })：

Value.foo:`bar` Value.bar:``
Value.foo:`` Value.bar:`foo`

产生以下输出：

model association

Demo on JS Bin.

Answer 2

我必须看到更多的控制器，看看为什么你得到'必须是一个数组'错误，但我的猜测是它与你的数据设置方式直接相关。您的数据对象不是数组。

可能导致问题的另一个项目是，如果您要从控制器返回要在模板上呈现的数据，则需要将其指定为控制器中的属性。

listData: function(){
    //data = [{foos: {foo: 'bar'}, bars: {bar: 'foo'}}]
    return data;
}.property('listData'),

然后，这将允许模板迭代数据对象。

见jsbin：

http://jsbin.com/ucanam/5065/

EmberJS迭代模板中的对象

2 个答案: