访问 Ember 数据在模板上有很多关系

Question

我有一个 Rails 后端，按照 JSON API 标准 (jsonapi-resources gem) 提供数据。我有两个模型：联系人和电话号码。

class Contact < ApplicationRecord
  has_many :phone_numbers
end

class PhoneNumber < ApplicationRecord
  belongs_to :contact
end

这是 API 端点的 JSON 响应。

{
    "data": [
        {
            "id": "6",
            "type": "phone-numbers",
            "links": {
                "self": "http://localhost:3000/phone-numbers/6"
            },
            "attributes": {
                "name": "byeworld",
                "phone-number": "9212098"
            },
            "relationships": {
                "contact": {
                    "links": {
                        "self": "http://localhost:3000/phone-numbers/6/relationships/contact",
                        "related": "http://localhost:3000/phone-numbers/6/contact"
                    }
                }
            }
        }
    ]
}

这些是我的 Ember 模型：

联系方式：

import DS from 'ember-data';

export default DS.Model.extend({
  nameFirst: DS.attr('string'),
  nameLast: DS.attr('string'),
  email: DS.attr('string'),
  twitter: DS.attr('string'),
  phoneNumbers: DS.hasMany('phone-number', {async: true, inverse: 'contact'})
});

电话号码：

import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  phoneNumber: DS.attr('string'),
  contact: DS.belongsTo('contact', {async: true, inverse: 'phoneNumbers'})
});

这是我的路由处理程序：

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('contact', params.contact_id, {include: "phone-numbers"});
  },
  (...)
});

我无法通过以下方式访问模板上联系人的电话号码：

{{#each model.phoneNumbers as |phone|}}
  {{phone.name}}
{{/each}}

此外，电话号码的数据存在于 ember 控制台中。我错过了什么？

Answer 1

ember-data 版本 2.14.3 中存在未解决的已知问题。所以请将您的 ember-data 版本降级到 2.13.2 。这可能会解决您的问题。

参考这个 ember-data 开放问题 - https://github.com/emberjs/data/issues/4942

Answer 2

model.PhoneNumbers => model.phoneNumbers

如果这不仅仅是这个错字，请尝试从 JSON API 适配器/序列化器扩展您的模型序列化器/适配器（或者如果您的所有模型都使用它，则在您的应用程序序列化器/适配器上进行）：

import DS from 'ember-data'; export default DS.JSONAPIAdapter.extend({});

和：

import JSONAPISerializer from 'ember-data/serializers/json-api'; export default JSONAPISerializer.extend({});