为什么我不能在嵌套的 each 循环中显示第二个关联？

Question

我有 2 个模型 deliverHour 和 day。在 .hbs 文件中，我有两个嵌套的 each 循环。

我正在尝试显示每天的送货时间。显然，一旦它到达第二个 each 循环，它就不会渲染任何东西。甚至 this line does not render!

正在寻找 Ember 检查员。我没有看到任何失败的承诺。网络选项卡甚至没有显示 Ember 试图尝试呼叫交货时间终点。数据选项卡显示delivery-hour (0)，这意味着商店没有送货时间，这很奇怪。

由于日期模型的关系有 DS.hasMany('deliveryHour', { async: true })，我希望 Ember 对交货时间 api 资源进行异步调用。没有？

我在这里错过了什么？

// Route
import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    var addressId = this.checkoutCart.get('addressId');

    return Ember.RSVP.hash({
      address:       this.store.find('address', addressId),
      delivery:      this.store.createRecord('delivery'),
      days:          this.store.find('day')
    });
  },

  // You can use model.delivery to get delivery, etc
  // Since the model is a plain object you can just use setProperties
  // 
  setupController: function(controller, model) {
    controller.setProperties(model);
  },
});

// app/models/delivery-hour.js
import DS from 'ember-data';

export default DS.Model.extend({
  day:    DS.belongsTo('day', { async: true }),
  from:   DS.belongsTo('hour', { async: true }),
  to:     DS.belongsTo('hour', { async: true }),
  status: DS.attr('string')
});

// app/models/day.js
import DS from 'ember-data';

export default DS.Model.extend({
  deliveryHours: DS.hasMany('deliveryHour', { async: true }),
  name:          DS.attr('string'),
  dayOfTheWeek:  DS.attr('number')
});

// hbs
{{#each day in days}}
  <li>
    {{day.name}} // Returns something like 'Monday'
    {{day.deliveryHours}} // Returns something like <(subclass of DS.PromiseArray):ember770>
    {{day.deliveryHours.length}} // Returns 0

    {{#each deliveryHour in day.deliveryHours}}
      this line does not render!
      {{deliveryHour.hour}} <----- ideally, this is what i want to see
    {{/each}}
  </li>
{{/each}}

{{day.deliveryHours.length}}returns0。我想验证这一点。我正在使用 Rails 作为我的 API。在 Rails 控制台中，当我执行 Day.first.delivery_hours.count 时，它 returns 4. 奇怪 Ember returns 0. Ember 检查器中的网络选项卡, 不显示 Ember 试图调用交货时间 API 端点。

在截图的右上角，我点击了> $E。然后我转到 Ember 检查器的控制台选项卡并粘贴：$E.get('deliveryHours')。我得到 Object { content: Getter, toString: makeToString/<(), isFulfilled: true, 4 more… }.

在Ember Inspector的控制台，我也试过：

>> $E.get('deliveryHours').then(function(hours) { console.log(hours.get('length'));});
Object { _id: 156, _label: undefined, _state: undefined, _result: undefined, _subscribers: Array[0] }

更新：我 API 天 returns 的回复为：

{
    "days": 
[
{

    "id": 1,
    "name": "Monday",
    "day_of_the_week": 1

},
{

    "id": 2,
    "name": "Tuesday",
    "day_of_the_week": 2

},
{

    "id": 3,
    "name": "Wednesday",
    "day_of_the_week": 3

},
{

    "id": 4,
    "name": "Thursday",
    "day_of_the_week": 4

},
{

    "id": 5,
    "name": "Friday",
    "day_of_the_week": 5

},
{

    "id": 6,
    "name": "Saturday",
    "day_of_the_week": 6
},
{
    "id": 7,
    "name": "Sunday",
    "day_of_the_week": 7
}
]
}

http://emberjs.com/guides/models/the-rest-adapter/#toc_relationships 表示我应该将 delivery_hours 作为 ID 数组加载。我也试过了，结果一样..

Answer 1

那是因为 deliveryHours 在你的模型中是一个 async 属性，这就是为什么 {{day.deliverHours}} returns 一个未解决的承诺，而不是记录数组你在期待。

您必须在 afterModel 挂钩中显式解析它，如下所示：

// Route
import Ember from 'ember';

var RSVP = Ember.RSVP;

export default Ember.Route.extend({
  // ...

  afterModel: function(model) {
    return RSVP.all(
      model.days.map(function(day) {
        return day.get('deliveryHours');
      })
    );
  }

});

为什么我不能在嵌套的 each 循环中显示第二个关联？

Why can't I display the second association in a nested each loop?

ember.js

ember-data

ember-cli