Iterowanie przez obiekt Ember

Question

Mam Ember.Object, który jest używany jako podstawowy słownik klucz/wartość. Nazwy kluczy są dynamiczne i to, co chciałbym móc zrobić, to powtórzenie tych właściwości. Wydaje się, że to powinno być łatwe, ale wyszukiwania w Google i moje wspólne drapanie głowy nie wydaje się wskazywać na oczywistą odpowiedź, której oczekiwałem.

Na poniższym kodzie psuedo:

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

Moja Idealnym rozwiązaniem byłoby rozwiązanie dla tego kodu pozwoli mi szybko rozpoznać:

• Krytycznie: tablica nazw właściwości że object ma
• Idealnie: tablica wyliczonych nazw właściwości, które object ma
• Wstawianie na wierzch: tablica komputerów ed właściwości, które obejmują seterów wzdłuż getter

W każdym razie masz jakieś pomysły?

----- AKTUALIZACJA -----

się być nieco bardziej wyraźne temat mojego precyzyjnego przypadku użycia. Fikcyjna MyObject jest faktycznie właściwość, że pochodzi z jednego moich modeli:

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

Gdzie transformacji obiekt jest ustawiony tak, aby obsługiwać serializacji/deserializacji:

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

W ten sposób, kiedy pracuję z MyModel w szablonie kierownicy mogę zrobić coś takiego:

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

Answer 1

W Ember v2.0.0-beta.1you can use{{each-in}}, pomocnik, który umożliwia iteracyjne nad klucze obiektów i ich wartości w swoich szablonach.

Na przykład, przykładowy obiekt:

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

Instancje w ten sposób:

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

I potwierdziło ponad w szablonie za pomocą {{each-in}} pomocnika:

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

Produkuje następujące wyniki:

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

JSBin demonstrating this.

Warto wspomnieć, że przy użyciu {{each-in}} pomocnika:

jest migawką spojrzenie raz na obiekt, nie będzie przestrzegać właściwości dodawanych/usunięte/zmienione.

Dzięki @ Kingpin2k za wskazanie tego. Demo, należy pamiętać, że aktualizacja do prop1 nie jest odzwierciedlana w modelu DOM.

Answer 2

Oto kilka pomysłów.

Sposób obiektu klucze 1

można iteracyjnego właściwości i odfiltrować kluczy łańcucha prototypu (z użyciem the hasOwnProperty() method): Metoda Klucze

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

obiektu 2

W nowszych przeglądarkach można bezpośrednio uzyskać tablicę właściwości obiektu za pomocą the Object.keys() method:

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

Ember.obliczone właściwości obiektu

Ember zapewnia sposób iteracyjne nad obliczonych właściwości klasy za pomocą eachComputedProperty() method

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

JSBin example demonstrating these methods

Aktualizacja

ten mógłby mieć właściwość obliczoną na Twój model, który ponownie rozmieści dane MyObject w tablicy, która może być następnie wyświetlana przez 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') 
}); 

If prop3 zawierała:

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

następnie prop3PropertyArray byłoby:

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

które następnie mogą być wyświetlane w kierownicy za pomocą {{#each}}..{{/each}} pomocnika:

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

Updated JSBin example