Lặp lại thông qua một đối tượng Ember

Question

Tôi có Ember.Object đang được sử dụng làm từ khóa/giá trị cơ bản. Tên của các phím là động và những gì tôi muốn có thể làm là lặp qua các thuộc tính này. Có vẻ như điều này nên được dễ dàng nhưng tìm kiếm google và trầy xước đầu tập thể của tôi dường như không trỏ đến câu trả lời rõ ràng tôi đã mong đợi.

Đối với đoạn mã sau psuedo:

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

giải pháp lý tưởng của tôi sẽ giải quyết cho mã này sẽ cho phép tôi để nhanh chóng phân biệt:

• Critically: một loạt các tên thuộc tính rằng object có
• Lý tưởng nhất: một loạt các tên thuộc tính được tính là object có
• Icing-on-the-Top: một mảng tính toán các thuộc tính ed bao gồm các bộ định cư dọc theo getter

Dù sao có bất kỳ ý tưởng nào?

----- UPDATE -----

Để rõ ràng hơn một chút về trường hợp sử dụng chính xác của tôi. Các hư cấu MyObject thực sự là một tài sản mà đến từ một mô hình của tôi:

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

Trường hợp chuyển đổi đối tượng được thiết lập để xử lý serialization/deserialization:

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

Bằng cách này khi tôi đang làm việc với MyModel trong một mẫu tay lái tôi có thể làm một cái gì đó như:

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

Answer 1

Trong Ember v2.0.0-beta.1you can use{{each-in}} helper, cho phép bạn để lặp qua các phím đối tượng và giá trị của chúng trong mẫu của bạn.

Ví dụ, đối tượng mẫu:

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

instantiated theo cách này:

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

Và lặp trên trong mẫu sử dụng {{each-in}} helper:

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

Tạo kết quả như sau:

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

JSBin demonstrating this.

Đó là giá trị đề cập đến rằng việc sử dụng {{each-in}} helper:

là một trong những thời gian chụp nhìn vào đối tượng, nó sẽ không quan sát thuộc tính được thêm/gỡ bỏ/thay đổi.

Cảm ơn @ Kingpin2k đã chỉ ra điều này. Demo, lưu ý rằng cập nhật thành prop1 không được phản ánh trong DOM.

Answer 2

Dưới đây là một số ý tưởng.

phương pháp đối tượng của phím 1

Bạn có thể duyệt qua các thuộc tính và lọc ra các phím từ chuỗi nguyên mẫu (sử dụng the hasOwnProperty() method): Phương pháp Phím

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'] 

Object của 2

Trên các trình duyệt mới hơn, bạn có thể trực tiếp nhận được một mảng thuộc tính của đối tượng sử dụng the Object.keys() method:

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

Ember.tính tính của đối tượng

Ember cung cấp một cách để lặp qua các thuộc tính tính toán của một lớp bằng cách sử dụng eachComputedProperty() method

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

JSBin example demonstrating these methods

Cập nhật

Bạn có thể có một tài sản tính trên mô hình của bạn sắp xếp lại dữ liệu của MyObject thành một mảng mà sau đó có thể được hiển thị bởi 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') 
}); 

Nếu prop3 chứa:

prop3: App.MyObject.create({ 
    stuff: "stuff!", 
    anotherRandomKey: "more value here" 
}) 

sau đó prop3PropertyArray sẽ là:

[ 
    { 
    key: "stuff", 
    value: "stuff!" 
    }, 
    { 
    key: "anotherRandomKey", 
    value: "more value here" 
    } 
] 

mà sau đó có thể được hiển thị trong tay lái sử dụng một {{#each}}..{{/each}} helper:

{{#each item in prop3PropertyArray}} 
    {{item.key}} = {{item.value}}<br> 
{{/each}} 

Updated JSBin example