Ember # wird nicht über Array iterieren

Question

Ich habe ein wirklich seltsames Verhalten, wobei ich ein Ember-Array habe, das eine Länge hat, ein erstes Objekt, aber ich kann nicht darüber iterieren.

Ich habe ein Session-Objekt, das die Teammitglieder des Benutzers fragt:

import Ember from 'ember'; 
import DS from 'ember-data'; 

export default Ember.Service.extend({ 
    store: Ember.inject.service(), 

    ... 

    teamMembers: Ember.computed('token', function() { 
    const promise = this.get('store').findAll('teamMember', {include: 'user,organization'}); 
    return DS.PromiseObject.create({ promise: promise }); 
    }) 
}); 

Soweit ich richtig das funktioniert sehen können, denn wenn ich es aus meiner Vorlage zugreifen, ich die Array-Länge zugreifen und das erste Objekt:

Diese funktionieren perfekt, Rückgabe 2 und meinen eigenen Namen. Wenn es jedoch als eine Anweisung ausgedrückt wird, gibt es nichts zurück:

<ul> 
    {{#each session.teamMembers as |teamMember|}} 
    <li>{{teamMember.name}}</li> 
    {{/each}} 
</ul> 

Das UL-Element ist vollständig leer. Wenn ich eine {{else}} -Klausel habe, erscheint die else-Klausel, bis das Versprechen erfüllt ist, und dann bleibt mir ein leeres ul-Element übrig. Der Ember Inspector zeigt an, dass alle Werte korrekt geladen wurden.

Wenn ich die Methode wie folgt ändern:

teamMembers: Ember.computed('token', function() { 
    return [{name: 'Paul Doerwald', role: 'lead'}, {name: 'Justin Trudeau', role: 'member'}]; 
}) 

Dann ist alles wie erwartet funktioniert.

Ich mache eindeutig etwas falsch in der TeamMembers-Methode, vermutlich die falsche Array-Typ oder etwas zurück, aber ich kann nicht herausfinden, was.

Vielen Dank für Ihre Hilfe!

Answer 1

Für Array gibt es . Versprechen in dieses Versprechen zu bringen, wird es mit jedem Helfer so machen, wie es ist. Sie können verwenden, wenn Wache um den Ladezustand anzuzeigen.

//service 
teamMembers: Ember.computed('token', function() { 
    const promise = this.get('store').findAll('teamMember', {include: 'user,organization'}); 
    return DS.PromiseArray.create({promise}); 
}) 

// template 
{{#if session.teamMembers.isFulfilled}} 
    {{#each session.teamMembers as |teamMember|}} 
    <li>{{teamMember.name}}</li> 
    {{/each}} 
{{else}} 
    loading... 
{{/if}}