如何让 Ember 延迟（异步）加载 hasMany答案

【问题标题】：How to get Ember to Lazy (async) Load hasMany如何让 Ember 延迟（异步）加载 hasMany
【发布时间】：2016-06-21 14:54:15
【问题描述】：

可能我误解了 Ember 如何延迟加载 hasMany 关系的双方，但我会指定我想要的内容，有人可以告诉我这是否可能以及如何配置。

我正在使用RESTAdapter，并且我有一个与其他几个对象具有一对多关系的父对象。当我查看父对象时，我有想要显示为子插座的子对象的链接。

示例可能是：

// brand.js
export default Model.extend({
  name: attr('string'),
  description: attr('string'),
  dateCreated: attr('date'),
  lastUpdated: attr('date'),
  regions: hasMany('region', {async: true})
});

// region.js
export default Model.extend({
  name: attr('string'),
  dateCreated: attr('date'),
  lastUpdated: attr('date'),
  brand: belongsTo()
});

当我访问 /api/brands/1 时，我将返回以下 JSON：

{
  "brand": {
    "id": 1,
    "dateCreated": 1466456255539,
    "lastUpdated": 1466456255936,
    "name": "Some Brand",
    "description": "Voluptates odio nemo corrupti",
  }
}

我的路线定义如下：

this.route('brand', {path: '/brands/:brand_id'}, function() {
  this.route('regions');
});

因此，在brand 详细信息屏幕中，我有一个{{outlet}}，当我单击regions 的链接时，我需要获取该品牌的区域，URL 将是/api/brands/1/regions。

如果我在一个大结果中返回所有数据，一切正常，我的regions 路由器看起来像这样：

export default Ember.Route.extend({
  model() {
    return this.modelFor('brand').get('regions');
  }
});

但我不知道该怎么做才能从我的 API 中懒惰地正确获取区域。或者，如果它甚至是可能的。我阅读了side loading，目前，我的 API 不会只返回儿童的 ID。

【问题讨论】：

一种方法是将查询参数添加到链接到：{{#link-to "brand.regions" (query-params brand=model)}}，然后在区域-Route 中查询该品牌。 the docs for query-params
如果您在模板中被激活的任何位置使用regions 属性，则 Ember 将自动加载该关系的记录。您能否向我们展示您实际显示区域的模板？
@GJK - 我明天上班时可以，但这有点道理。我可以告诉你，我没有通过{{brand.regions}} 获取它们，也许如果我以这种方式访问它们，它会以不同的方式查询。我会尝试类似的方法并报告。

标签： ember.js ember-data

【解决方案1】：

在您的示例中，ember.js 不知道要加载哪些区域。您的 JSON 必须是（非嵌入式）：

{
  "brand": {
    "id": 1,
    "dateCreated": 1466456255539,
    "lastUpdated": 1466456255936,
    "name": "Some Brand",
    "description": "Voluptates odio nemo corrupti",
    "regions": ["5", "9"]
  }
}

然后加载 id 为 5 和 9 的区域。或者您可以直接嵌入它们：

{
  "brand": {
    "id": 1,
    "dateCreated": 1466456255539,
    "lastUpdated": 1466456255936,
    "name": "Some Brand",
    "description": "Voluptates odio nemo corrupti",
    "regions": [{
      "id": "5",
      "name": "Hanover",
      "dateCreated": "2016-09-25 18:39:18",
      "lastUpdated": "2016-09-25 18:39:18",
    },{
      "id": "9",
      "name": "Cologne",
      "dateCreated": "2016-01-19 11:59:18",
      "lastUpdated": "2016-02-22 12:09:58",
    }]
  }
}

后者见here。

【讨论】：

这就是我所害怕的。由于regions' parent，我希望 Ember 可以推断出正确的 URL； /brands/1/regions 这就是 API 当前的工作方式。这是有问题的，因为目前，我必须在拉出列表时嵌入所有子项（或者在我在详细视图中时弄清楚如何让它再次查找品牌）。
我的印象是 REST 适配器也可以通过 URL 处理获取 hasMany 关系。 This site 似乎同意，但我对 Ember-Data 已经不太那么熟悉了。