Question

我遇到了一种非常奇怪的行为，其中我有一个有长度的Ember数组，第一个对象，但我无法迭代它。

我有一个查询用户团队成员的会话对象：

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

据我所知，这是正常的，因为当我从模板中访问它时，我可以访问数组长度和第一个对象：

<p>The length of the array is {{session.teamMembers.length}}</p>
<p>The first entry in the array is {{session.teamMembers.firstObject.name}}</p>

这些工作完美，分别返回2和我自己的名字。但是，当表示为每个语句时，它不返回任何内容：

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

ul元素完全为空。如果我有一个{{else}}子句，则else子句出现，直到promise完成，然后我留下一个空的ul元素。 Ember Inspector显示所有值已正确加载。

如果我按如下方式更改方法：

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

然后一切都按预期工作。

我明显在teamMembers方法中做错了什么，大概是返回错误的数组类型或类似的东西，但我无法弄清楚是什么。

非常感谢你的帮助！

Answer 1

对于数组，有DS.PromiseArray。将承诺包含在内将使其适用于每个帮助程序。你可以使用if guard来显示加载状态。

//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}}

Ember #each不会迭代数组

1 个答案: