12

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

对于以下伪代码：

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

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

  • 至关重要的是：一组object具有
  • 理想情况下：一个计算属性名称的数组，object具有
  • Icing-on-the-Top：计算属性数组，包括沿 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}}
4

2 回答 2

19

在 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}}helper：

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

感谢@Kingpin2k 指出这一点。Demo，请注意更新到prop1不反映在 DOM 中。

于 2015-06-13T12:37:47.933 回答
8

这里有一些想法。

对象的键方法 1

您可以遍历属性并从原型链中过滤掉键（使用方法hasOwnProperty()）：

var obj = App.MyObject.create({stuff: "stuff!"});

var objKeys = []
for(var key in obj) {
  if(obj.hasOwnProperty(key)){
    objKeys.push(key);
  }
}
console.log(objKeys); // ['stuff']

对象的键方法 2

在较新的浏览器上，您可以使用以下Object.keys()方法直接获取对象属性的数组：

console.log(Object.keys(obj)); // ['stuff']

Ember.Object 的计算属性

Ember 提供了一种使用方法迭代类的计算属性的eachComputedProperty()方法

App.MyObject.eachComputedProperty(function(name, meta){
  console.log(name, meta);  // randomComputedProperty
});

演示这些方法的 JSBin 示例

更新

您可以在模型上有一个计算属性，将MyObject's 的数据重新排列到一个数组中，然后可以由把手显示：

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

更新了 JSBin 示例

于 2013-10-12T17:24:08.963 回答