Ember.js 在余烬对象中迭代

我有一个Ember.Object，它被用作基本的键/值字典。键的名称是动态的，我希望能够遍历这些属性。看起来这应该很容易，但谷歌搜索和我的集体挠头似乎并没有指向我所期待的显而易见的答案

对于以下psuedo代码：

App.MyObject = Ember.Object.extend({
    randomComputedProperty: function() {
        return "foobar";
    }     
}
$object = new MyObject.create(someBigAndUnpredictableNameValueHash);

我的理想解决方案是解决这一问题，因为代码允许我快速识别：

• 关键：

  对象

  具有的属性名称数组
• 理想情况下：

  object

  具有的计算属性名数组
• 顶部覆冰：计算属性数组，包括getter上的setter

你有什么想法吗

-----更新-----

更明确一点我的确切用例。虚构的

MyObject

实际上是一个来自my模型的属性：

App.MyModel = DS.Model.extend({
    prop1: DS.attr('string'),
    prop2: DS.attr('number'),
    prop3: DS.attr('my-object')
}

其中设置转换对象以处理序列化/反序列化：

App.MyObjectTransform = DS.Trnasform.extend({
    deserialize: function(serialized) {
        return App.MyObject.create(serialized)
    },
    deserialize: function(deserialized) {
        return deserialized;
    }
}

这样，当我在把手模板中使用

MyModel

时，我可以执行以下操作：

{{prop1}}
{{prop2}}
{{#each prop3}}
    {{key}} = {{value}}
{{/each}}

这里有一些想法

对象的关键帧方法1

您可以迭代属性并从原型链中过滤出键（使用）：

对象的关键帧方法2

在较新的浏览器上，您可以使用以下命令直接获取对象属性的数组：

余烬对象的计算属性

Ember提供了一种使用

更新

您的模型上可以有一个计算属性，该属性将

MyObject

的数据重新排列到一个数组中，然后该数组可以通过手柄显示：

App.MyModel = DS.Model.extend({
  prop1: DS.attr('string'),
  prop2: DS.attr('number'),
  prop3: DS.attr('my-object'),

  prop3PropertyArray: function(){
    var prop3, 
        propertyArray = [];

    prop3 = this.get('prop3');

    for(var key in prop3) {
      if(prop3.hasOwnProperty(key) && key !== "toString"){
        propertyArray.push({key: key, value: prop3.get(key)});
      }
    }

    return propertyArray;
  }.property('prop3')
});

如果包含

prop3

：

prop3: App.MyObject.create({
  stuff: "stuff!",
  anotherRandomKey: "more value here"
})

然后，

prop3PropertyArray

将是：

[
  {
    key: "stuff",
    value: "stuff!"
  },
  {
    key: "anotherRandomKey",
    value: "more value here"
  }
]

然后可以使用

{{{{each}}..{{/each}

辅助对象在把手中显示：

{{#each item in prop3PropertyArray}}
  {{item.key}} = {{item.value}}<br>
{{/each}}

{{#each-in $object as |key value|}}
  `{{key}}`:`{{value}}`
{{/each-in}}

{{{#prop3PropertyArray中的每个项目}
{{item.key}}={{item.value}}

{{/每个}}

---

在Emberv2.0.0-beta.1

{{each In}}

帮助程序中，它允许您在模板中迭代对象键及其值

例如，示例对象：

App.MyObject = Ember.Object.extend({
  randomComputedProperty() {
    return 'foobar';
  }     
});

以这种方式实例化：

let $object = App.MyObject.create({
  prop1: 'value1',
  prop2: 'value2',
  prop3: ['element1', 'element2']
});

并使用

{{each in}}

helper在模板中迭代：

{{#each item in prop3PropertyArray}}
  {{item.key}} = {{item.value}}<br>
{{/each}}

{{#each-in $object as |key value|}}
  `{{key}}`:`{{value}}`
{{/each-in}}

产生以下结果：

`prop1`:`value1`
`prop2`:`value2`
`prop3`:`element1,element2`

值得一提的是，使用

{{{each in}}

helper：

{{#each item in prop3PropertyArray}}
  {{item.key}} = {{item.value}}<br>
{{/each}}

{{#each-in $object as |key value|}}
  `{{key}}`:`{{value}}`
{{/each-in}}

是一次性快照查看对象，它不会进行观察 正在添加/删除/更改的属性

---

感谢@Kingpin2k指出这一点，请注意，对

prop1

的更新不会反映在DOM中。

好的，谢谢。我会调查这些。从一个对象切换到一些可枚举类型，您觉得怎么样？这是否有助于我在Handlebar模板中遍历集合。您可能希望在控制器中将其处理为更易于在模板中显示的内容。把手有目的地具有尽可能少的逻辑，因此重物应该在控制器中完成。这个对象是模型属性之一序列化的结果。理想情况下，我可以在模板中引用属性为

{{{{each MyObject}}{{key}}={{value}}{/each}}

。我用更多的上下文更新了这个问题，说明了我正在尝试做什么。为什么不提及

Ember.keys

？应该提到的是，这是一次查看对象的快照，它不会观察到正在添加/删除/更改的属性。