ember 数据未加载属于模型答案

【问题标题】：ember data not loading belongsTo modelember 数据未加载属于模型
【发布时间】：2016-09-16 13:20:25
【问题描述】：

我正在使用 ember 2.8.0 和 ember-data 2.8.0。我定义了以下模型：

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

export default DS.Model.extend({
    name: DS.attr('string'),
    floor: DS.belongsTo('floor'),
    number: DS.attr('string'),
    phone: DS.attr('string'),
    email: DS.attr('string'),
    photo: DS.attr(),
    createdAt: DS.attr('date'),
    updatedAt: DS.attr('date')
});

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

export default DS.Model.extend({
    name: DS.attr('string'),
    stores: DS.hasMany('store'),
    createdAt: DS.attr('date'),
    updatedAt: DS.attr('date')
});

我的 router.js 有以下路由：

//app/router.js
this.route('stores', function() {
    this.route('new');
    this.route('edit');
});

我的 templates/stores/index.hbs 有以下{{#each}} 声明：

<tbody>
      {{#each model as |store|}}
       <tr>
           <td>{{store.name}}</td>
           <td>{{store.number}}</td>
           <td>{{store.floor.name}}</td>
           <td>{{store.phone}}</td>
           <td>{{store.email}}</td>
           <td>{{moment-format store.createdAt}}</td>
           <td>{{moment-format store.updatedAt}}</td>   
       </tr>
       {{/each}}
</tbody>

我原以为{{store.floor.name}} 行会针对表格中的每一行向 /floors/{id} 发出请求。

我错过了什么？在 Ember 中处理这个问题的正确方法是什么？

我的 api 是否应该返回不同于以下内容的内容？

[{"id":1,"floorId":1,"name":"McDonalds","number":"10-A","phone":"(11) 2020-3455","email":"lapa@mcdonalds.com.br","photo":null,"createdAt":"2016-09-15T13:45:32.000Z","updatedAt":"2016-09-15T13:45:32.000Z"}]

我应该使用其他模型挂钩手动加载关联的模型吗？

【问题讨论】：

store 模型的属性名称需要与服务器提供的名称相匹配，除非您在适配器/序列化器/某处为它们定义了一些特殊处理（我忘记了这种情况到底发生在哪里，现在)，这似乎不太可能。因此，返回 floor 而不是 floorId，一切可能才刚刚开始。
出现在@Thernys，谢谢！有趣的是，更改我的 api 返回的内容可以修复它，但是，将我的模型的属性名称从 floor 更改为 floorId 不会。那会是一些余烬数据约定吗？另外，愿意回答这个问题吗？
还可以找到您提到的自定义处理的位置@Thernys：guides.emberjs.com/v2.8.0/models/customizing-serializers/…
您在关系中缺少 { async: true }。
@user2105103 不，因为 ember 2.x 这是默认行为。

标签： javascript ember.js ember-data

【解决方案1】：

正如最初在 cmets 中（并且调皮地）回答的那样，除非您有 defined custom processing for them in your serializer，否则您的 store 模型的属性名称应该与服务器给您的匹配。所以，返回floor 而不是floorId，事情可能就开始起作用了。

我不完全确定为什么更改属性名称以匹配服务器结果对您不起作用 (floor: DS... => floorId: DS...)。据我所知，它也应该以这种方式工作（就像我刚才尝试的那样）。我喜欢采用PEBKAC 方法，因此在可用信息有限的情况下，我将假设您的测试条件可能存在缺陷。也许您已经修改了服务器以返回 floor，这不再符合模型的期望。也许您忘记更改模板中的{{store.floor.name}} 以匹配新定义。如果使用 Ember-CLI，您可能只是忘记重建项目。

^{_{或者也许我只是不知道我在说什么，如果你足够关心并试图排除用户错误，你应该问一个新问题。}}

【讨论】：

【解决方案2】：

ember-data 从后端获取数据的方式取决于您的序列化程序。您没有指定使用哪个序列化程序，所以我无法告诉您它的期望。但是 ember-data 内部预期的格式是jsonapi。因此，对于您的情况，这是正确的：

{
  "data": [
    {
      "id": "1",
      "type": "store",
      "attributes": {
        "name": "McDonalds",
        "number": "10-A",
        "phone": "(11) 2020-3455",
        "email": "lapa@mcdonalds.com.br",
        "photo": null,
        "createdAt": "2016-09-15T13:45:32.000Z",
        "updatedAt": "2016-09-15T13:45:32.000Z"
      },
      "relationships": {
        "floor": {
          "data": {
            "type": "floor",
            "id":"1"
          }
        }
      }
    }
  ]
}

确保您的序列化程序为您的后端响应返回此格式。

【讨论】：