Ember 数据 JSONAPI 复杂属性数据

Question

我有一个从服务器返回的数据结构，用于我正在编写的一些过滤器功能。每个过滤器组都有许多过滤器。

data: [
    {
        type: "filter-group",
        id: "556d7f5fa1f9de08500ef4e8_1",
        attributes: {
            name: "Colour",
            created-date: "0001-01-01T00:00:00Z",
            active: true,
            filters: [
                {
                    id: "556d7f5fa1f9de08500ef4e8_1_1",
                    name: "Red",
                    created-date: "0001-01-01T00:00:00Z",
                    active: true
                },
                {
                    id: "556d7f5fa1f9de08500ef4e8_1_2",
                    name: "Blue",
                    created-date: "0001-01-01T00:00:00Z",
                    active: true
                },
                {
                    id: "556d7f5fa1f9de08500ef4e8_1_3",
                    name: "Green",
                    created-date: "0001-01-01T00:00:00Z",
                    active: true
                }
            ]
        }
    }
]

我有这样设置的模型：

// models/filter-group.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  active: DS.attr('boolean'),
  client: DS.belongsTo('client', { embedded: 'always' }),
  filters: DS.hasMany('filter', { embedded: 'always' })
});

还有：

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

export default DS.Model.extend({
  name: DS.attr('string'),
  active: DS.attr('boolean'),
  createdDate: DS.attr('date'),
  filterGroup: DS.belongsTo('filter-group', { embedded: 'always' })
});

我是使用 JSONAPI 的新手，所以我不确定我的数据设置是否是解决此问题的正确方法。我正在尝试遍历过滤器组，然后在每个过滤器组中循环遍历其可用的过滤器，使用以下把手模板：

{{#each filterGroups as |filterGroup|}}
    <h6>{{filterGroup.name}}</h6>

    {{#each filterGroup.filters as |filter|}}
        -- Filter output here --
    {{/each}}
{{/each}}

但是每个 filterGroup.filters 对象都是空的。我在这里做错了什么？我是否完全误解了 JSONAPISerializer 在这样的结构上的工作方式？

Answer 1

在 JSON API 中，虽然您可以在属性中嵌入数据，但您不能/不应该嵌入完整的资源对象（即具有自己的 type、relationships 等的对象）。我猜这就是 Ember Data 的绊脚石。

相反，JSON API 要求您将这些嵌入式资源放入 included 集合中（见下文）。这允许主数据中的多个资源引用相同的included 资源，而无需在有效负载中多次包含该资源。所以服务器响应应该是这样的：

{
  "data": [{
    "type": "filter-group",
    "id": "556d7f5fa1f9de08500ef4e8_1",
    "attributes": {
      "name": "Colour",
      "created-date": "0001-01-01T00:00:00Z",
      "active": true
    },
    "relationships": {
      "filters": {
        "data": [
          {"type": "filters", "id": "556d7f5fa1f9de08500ef4e8_1_1"},
          {"type": "filters", "id": "556d7f5fa1f9de08500ef4e8_1_2"},
          {"type": "filters", "id": "556d7f5fa1f9de08500ef4e8_1_3"}
        ]
      }
    }
  }],
  "included": [{
    "type": "filters",
    "id": "556d7f5fa1f9de08500ef4e8_1_1",
    "attributes": {
      "name": "Red",
      "created-date": "0001-01-01T00:00:00Z",
      "active": true
    }
  }, {
    "type": "filters",
    "id": "556d7f5fa1f9de08500ef4e8_1_2",
    "attributes": {
      "name": "Blue",
      "created-date": "0001-01-01T00:00:00Z",
      "active": true
    }
  }, {
    "type": "filters",
    "id": "556d7f5fa1f9de08500ef4e8_1_3",
    "attributes": {
      "name": "Green",
      "created-date": "0001-01-01T00:00:00Z",
      "active": true
    }
  }]
}

然后，您可能必须使用 Ember Data 中的 embedded 标志以外的其他东西来获取包含的资源——我不确定。但这绝对是 JSON API 方面的方法。