Ember.js：如何处理hasMany关联返回的DS.PromiseManyArray？

核心机制 #

Ember Data中通过hasMany定义的关联属性，本身的设计返回值就是DS.PromiseManyArray，不属于运行异常：这类对象是类数组结构的异步封装，既支持响应式追踪关联数据的增删变化，也会在关联数据加载完成后自动透出实际的模型实例列表。

不同场景的正确处理方式 #

模板层渲染关联数据 #

这是业务开发中最常用的场景：

• 典型踩坑：用each-in helper遍历comments属性。each-in的设计目标是遍历普通对象的键值对，不内置异步结构自动解析能力，拿到的是原始的Promise封装对象，自然无法渲染出实际的评论内容。
• 标准实现：用内置的each helper遍历即可。each helper本身内置了对PromiseManyArray的自动解析、响应式更新追踪能力，传入关联属性就能直接拿到加载完成的实际数据，示例代码：

{{#each this.event.comments as |comment|}}
  <div class="comment-item">
    <p>{{comment.field_1}}</p>
  </div>
{{/each}}

JS逻辑层取关联数据 #

如果在路由、组件的JavaScript逻辑中需要拿到实际的模型实例，可以直接对PromiseManyArray做await操作，就能得到解析完成的实例数组：

// 在async异步函数内执行
const targetEvent = this.store.findRecord('event', eventId);
const commentList = await targetEvent.comments;
// 此时commentList为Comment模型实例组成的数组

注意：await拿到的是对应时刻的快照普通数组，不会保留后续的响应式更新能力。如果需要持续追踪关联的新增、删除变化，建议始终保留对原始PromiseManyArray对象的引用，不要将其转换为静态数组长期使用。

常见避坑提示 #

• 不要手动对PromiseManyArray做Array.from解构、直接赋值到普通变量使用，会丢失Ember的响应式追踪能力，导致后续关联数据变化时视图无法同步刷新。
• PromiseManyArray会自动根据store的请求逻辑发起关联数据的后台加载，加载完成后自动触发界面更新，不需要手动编写额外的加载状态判断逻辑。

内容的提问来源于stack exchange，提问作者João Ramires