jeudi 27 octobre 2016

Ember #each won't iterate over array

I'm experiencing a really weird behaviour wherein I have an Ember array that has a length, a first object, but I can't iterate over it.

I have a session object which queries the user's team members:

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

As far as I can see this is working correctly, because when I access it from inside my template, I can access the array length, and the first object:

<p>The length of the array is </p>
<p>The first entry in the array is </p>

These work perfectly, returning 2 and my own name, respectively. However, when expressed as an each statement, it returns nothing:

<ul>
  
    <li></li>
  
</ul>

The ul element is completely empty. If I have an clause, the else clause appears until the promise fulfills, and then I'm left with an empty ul element. The Ember Inspector shows all the values have been loaded correctly.

If I change the method as follows:

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

Then everything works as expected.

I'm clearly doing something wrong in the teamMembers method, presumably returning the wrong array type or something, but I can't figure out what.

Many thanks for your help!




Aucun commentaire:

Enregistrer un commentaire