通過Ember對象進行迭代

Question

我有Ember.Object被用作基本鍵/值字典。這些鍵的名字是動態的，我想要做的就是迭代這些屬性。似乎這應該很容易，但谷歌搜索和我的集體頭抓撓似乎沒有指向我期待的明顯答案。

爲以下僞代碼：

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

我的理想的解決方案將解決此代碼，可以讓我快速瞭解：

• 批判：屬性名稱的數組是object有
• 理想情況下：一組計算屬性名稱object具有
• 頂部結冰：計算機數組編輯屬性，包括沿着吸氣者的設置者

無論如何有什麼想法？

----- ----- UPDATE

爲了一點更加明確我的精確使用情況。虛構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}} 

Answer 1

在餘燼V2.0.0-beta.1you can use{{each-in}}幫手，它可以讓你通過你的模板對象鍵和值進行迭代。

例如，樣本對象：

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 demonstrating this.

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

是一次性快照，看對象，也不會觀察添加 性能/刪除/修改。

感謝@ Kingpin2k指出了這一點。 Demo，請注意，更新到prop1未反映在DOM中。

Answer 2

這裏有一些想法。

對象的關鍵方法1

可以在屬性迭代，並過濾掉來自原型鏈鍵（使用the hasOwnProperty() method）：

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

在較新的瀏覽器上，您可以直接使用the Object.keys() method獲取對象屬性的數組：

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

Ember。對象的計算性能

灰燼提供了一種使用eachComputedProperty() method

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

JSBin example demonstrating these methods

更新

在類的計算性能來迭代你可以有一個計算的屬性您的模型將MyObject的數據重新排列成數組，然後可以由handleba顯示RS：

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

Updated JSBin example