EmberJS遍历模板中的对象

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}}帮助程序来遍历对象属性。 例如，以下代码：

{{#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`

Answer 2

我将不得不查看您的控制器的更多内容，以了解为什么会出现“必须是数组”错误，但是我想这与您的数据设置直接相关。 您的数据对象不是数组。

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

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

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

看到这个jsbin：

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