通过一个Ember对象迭代 [英] Iterating through an Ember Object

问题描述

我有Ember.Object被用作一个基本的键/值字典。键的名称是动态的，我想要做的是迭代这些属性。似乎这样应该很容易，但谷歌搜索和我的集体头痛似乎并没有指出我期待的明显的答案。

对于以下伪代码：

  App.MyObject = Ember .Object.extend（{
 randomComputedProperty：function（）{
 returnfoobar; 
} 
} 
 $ object = new MyObject.create（someBigAndUnpredictableNameValueHash）; 
  

我的理想解决方案可以解决这个代码，让我快速辨别：

• 批判性地：对象的属性名称数组


• 理想情况：一个计算属性名称的数组对象具有


• Icing-on-the-Top：计算属性数组包括沿着getter的设置者

无论如何有任何想法？

- 更新-----

有关我的精确用例，请稍等一些。虚构的 MyObject 实际上是从我的一个模型进来的一个属性：

  App.MyModel = DS.Model.exten d（{
 prop1：DS.attr（'string'），
 prop2：DS.attr（'number'），
 prop3：DS.attr（'my-object'）
} 
  

Transform对象被设置为处理序列化/反序列化：

  App.MyObjectTransform = DS.Trnasform.extend（{
 deserialize：function（serialized））{
 return App.MyObject。创建（序列化）
}，
反序列化：function（反序列化）{
 return deserialized; 
} 
} 
  

这样当我使用 MyModel 在句柄模板中，我可以执行以下操作：

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

解决方案

在Ember v2.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-in $ object as | key value |}} 
 `{{key}}`：`{{value}}`
 {{/ each-in}} 
  

产生以下结果：

 `prop1`：`value1` 
`prop2`： value2` 
`prop3`：'element1，element2` 
  

JSBin演示这个。

值得一提的是，使用 {{ each-in}} helper：

是一次快照查看对象，它不会观察
属性被添加/删除/更改。

感谢@ Kingpin2k指出这一点。 演示，请注意，更新到 prop1 没有反映在DOM中。

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.

For the following psuedo code:

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:

• 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

Anyway have any ideas?

----- UPDATE -----

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')
}

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;
    }
}

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 you can use {{each-in}} helper, which lets you to iterate over object keys and their values in your templates.

For example, sample object:

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

Instantiated this way:

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

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

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

Produces following results:

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

JSBin demonstrating this.

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.

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

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