遍历 Ember 对象 [英] Iterating through an Ember Object

问题描述

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

I have Ember.Object which is being used as a basic key/value dictionary. The names of the keys are dynamic and what I'd like to be able do is iterate over these properties. Seems like this should be easy but google searches and my collective head scratching doesn't seem to point to the obvious answer I was expecting.

对于以下伪代码:

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

我的理想解决方案是解决这段代码，让我能够快速辨别:

My ideal solution would solve for this code would allow me to quickly discern:

• 关键是:object 具有的属性名称数组
• 理想情况下:object 具有的计算属性名称数组
• Icing-on-the-Top:一组计算属性，包括 getter 和 setter

• Critically: an array of property names that that object has
• Ideally: an array of computed property names that object has
• Icing-on-the-Top: an array of computed properties that include setters along getter

有什么想法吗?

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

----- UPDATE -----

更明确地说明我的具体用例.虚构的 MyObject 实际上是一个来自我的模型的属性:

To be a little more explicit about my precise use case. The fictional MyObject is actually a property that comes in from one my models:

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

设置 Transform 对象以处理序列化/反序列化的位置:

Where a Transform object is setup to handle serialization/deserialization:

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

这样，当我在把手模板中使用 MyModel 时，我可以执行以下操作:

This way when I'm working with MyModel in a handlebars template I can do something like:

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

推荐答案

In Ember v2.0.0-beta.1 您可以使用 {{each-in}} 助手，它可以让您迭代模板中的对象键及其值.

In Ember v2.0.0-beta.1 you can use {{each-in}} helper, which lets you to iterate over object keys and their values in your templates.

例如，示例对象:

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

以这种方式实例化:

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

并使用 {{each-in}} helper 在模板中迭代:

And iterated over in template using {{each-in}} helper:

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

产生以下结果:

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

JSBin 演示了这一点.

值得一提的是，使用 {{each-in}} 助手:

It's worth to mention that using {{each-in}} helper:

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

is a one time snapshot look at the object, it will not observe properties being added/removed/changed.

感谢@Kingpin2k 指出这一点.Demo，注意对 prop1 的更新没有反映在DOM.

Thanks @Kingpin2k for pointing this out. Demo, note that update to prop1 isn't reflected in the DOM.

这篇关于遍历 Ember 对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！