ember 数据未加载属于模型

ember data not loading belongsTo model

我正在使用 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}} 会针对 table.

中的每一行向 /floors/{id} 发出请求

我错过了什么? 在 Ember 中处理该问题的正确方法是什么?

我的 api return 应该与下面的不同吗?

[{"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"}]

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

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"
          }
        }
      }
    }
  ]
}

确保你的序列化器returns这种格式用于你的后端响应。

正如最初(和顽皮地)在评论中回答的那样,你的 store 模型的属性名称应该与服务器给你的相匹配,除非你有 defined custom processing for them in your serializer。因此,return floor 而不是 floorId,事情可能才开始起作用。

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

或者我只是不知道我在说什么,如果您足够关心并尝试排除用户错误,您应该问一个新问题。