Vorlage wird nicht von Modellobjekt nach dem Sortieren rendern

Question

Ich sortiere ein Array von Objekten, die von Ember-Data abgefragt werden, mit 'type'-Taste, bevor sie in model() -Methode eines Ember.Route zurückgegeben werden.

app/Routen/test.js

export default Ember.Route.extend({ 
    model() { 
    let obj = Ember.Object.create({a: [], b: [], c: []}); 
    this.get('store').findAll('obj').then(function(unsorted){ 
     unsorted.forEach(function(item) {// sort per type 
     obj.get(item.get('type')).addObject(item); 
     }); 
     return obj; 
    }); 
    } 
}); 

Das Array von (das Versprechen) die Abfrage sieht wie folgt aus Ember-Daten zurückgegeben (alle Objekte Ember internen Eigenschaften haben)

[ 
    { 
    _id: '1', 
    type: 'a', 
    properties: {...} 
    }, 
    { 
    ... 
    }, 
    { 
    _id: '15', 
    type: 'b', 
    properties: {...} 
    } 
] 

Und das neue Objekt mit Objekten von „Typ“ -Taste sortiert wie folgt aussieht

{ 
    a: [{ 
     _id: '1', 
     type: 'a', 
     properties: {...} 
    }, 
    ... 
    ], 
    b: [ 
    ... , 
    { 
     _id: '15', 
     type: 'b', 
     properties: {...} 
    }, 
    c: [...] 
}; 

app/Routen/test.hbs

<h2>Test</h2> 
<h3>Type a</h3> 
{{#each model.a as |source|}} 
    <div> 
    {{source.properties.prop1}} 
    </div> 
{{/each}} 

Die Vorlage der Teil, der die Array-Schleifen über, noch hat die Ember-Inspektor Plugin-Liste die Model Eigenschaft unter „Eigene Eigenschaften“ des nicht machen Route (rechtes Feld im "Baum anzeigen" -Modus).

Wenn Sie jedoch ein POJO (wörtliches Einfügen von Objekt mit Array durch Schlüsselcode) zurückgeben, verhält sich alles wie erwartet.
Ich vermute, dass dies etwas mit den internen (Ember-) Eigenschaften der Objekte zu tun hat, die von Ember-Daten zurückgegeben werden (ich habe über den Besitzer eines Objekts gelesen usw.), aber ich kann das nicht herausfinden. .

Answer 1

Die Antwort von @Pavol wird auf das grundlegende Problem, aber return this.store...then(...)wird funktionieren, weil das ist, wie Versprechungen funktionieren. Lesen Sie the documentation.

dies So arbeiten:

model() { 
    let obj = Ember.Object.create({a: [], b: [], c: []}); 
    return this.get('store').findAll('obj').then(function(unsorted){ 
    unsorted.forEach(function(item) {// sort per type 
     obj.get(item.get('type')).addObject(item); 
    }); 
    return obj; 
    }); 
} 

.then(onFulfilled) gibt ein neues Versprechen, die mit dem Rückgabewert des onFulfilled -callback lösen wird.Das Erstellen eines neuen Versprechens mit new Promise(...) ist immer völlig nutzlos, wenn Sie bereits Versprechen haben und nur für Interoperabilität mit Callback-Code.

Answer 2

Sie fehlen return-Anweisung in Ihrem model() Haken:

export default Ember.Route.extend({ 
    model() { 
    let obj = Ember.Object.create({a: [], b: [], c: []}); 
    this.get('store').findAll('obj').then(function(unsorted){ 
     unsorted.forEach(function(item) {// sort per type 
     obj.get(item.get('type')).addObject(item); 
     }); 
     return obj; 
    }); 
    // no return value before, findAll() returns promise, thus model() returns undefined 
    } 
}); 

jedoch das Hinzufügen return this.store... Ihre Situation nicht lösen, da Sie Ihre Versprechen aktualisieren anderes Objekt nach (die then() Funktion) gelöst. Ich würde empfehlen, es in ein Versprechen zu verpacken und es zu lösen, ein modifiziertes Objekt basierend auf Ihrer Sortierlogik zu übergeben. Hinweis: Ich habe nicht berücksichtigt, ob das Sortieren in diesem Stadium sinnvoll ist und von "Ember-way" ist. Die Sortierung erfolgt normalerweise über berechnete Eigenschaften auf Controller-/Komponentenebene.

export default Ember.Route.extend({ 
    model() { 

    return new Ember.RSVP.Promise((resolve)=>{ 
     let obj = Ember.Object.create({a: [], b: [], c: []}); 
     this.get('store').findAll('obj').then(function(unsorted){ 
     unsorted.forEach(function(item) {// sort per type 
      obj.get(item.get('type')).addObject(item); 
     }); 
     resolve(obj); 
     }); 
    }); 

    } 
}); 

Update: Natürlich this.store() eine gültige Versprechen zurückgibt (die ich im Snippet darauf hingewiesen, aber falsch später erklärt) und so haben Sie es nicht wickeln, sorry für die confusément! Ich habe nicht bemerkt, dass der Rückgabewert des Callbacks, der an then() übergeben wurde, automatisch intern in einem Versprechen übergeben wird, obwohl ich die Versprechungskette verwende und dies auch täglich. Schande über mich! Thx @Lux, um dies auf den richtigen Weg zu bringen.