遍历Ember对象

debugcn 发表于 Dev

ken

我有Ember.Object，它被用作基本键/值字典。键的名称是动态的，我想做的就是遍历这些属性。看起来像这样应该很容易，但是Google搜索和集体抓挠似乎并不指向我期望的明显答案。

对于以下伪代码：

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

我理想的解决方案将解决此代码，使我能够快速识别：

批判：属性名称的数组是object有
理想情况下：计算的属性名称数组应object具有
顶部覆冰：包含getter沿setter的计算属性的数组

反正有什么想法吗？

- - - 更新 - - -

为了更明确地说明我的精确用例。虚构MyObject实际上是一种来自我的模型的属性：

App.MyModel = DS.Model.extend({
    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.create(serialized)
    },
    deserialize: function(deserialized) {
        return deserialized;
    }
}

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

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

丹尼尔·马克（Daniel Kmak）

在Ember v2.0.0-beta.1中， 您可以使用 {{each-in}}helper，它可以使您遍历模板中的对象键及其值。

例如，样本对象：

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

以这种方式实例化：

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

并使用{{each-in}}辅助程序在模板中进行迭代：

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

产生以下结果：

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

JSBin证明了这一点。

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-3

我来说两句

0条评论

登录后参与评论

来自分类Dev