Ember：访问模板中的旁加载模型关系数据

Question

我正在尝试通过旁加载数据在模板中显示模型的关系，但似乎存在一些问题。使用 Ember Inspector，我发现关系已从数据中正确加载。但是页面上没有显示数据。

正在寻找有关从何处开始调试的解决方案或建议。非常感谢。

车把：

<dt>Categories</dt>
<dd>
  <ul>
    {{#each model.categories as |category| }}
      <li>{{ category.name }}</li>
    {{/each}}
  </ul>
</dd>

路线：

export default Ember.Route.extend(AuthenticatedRouteMixin, {
  model(params) {
    return this.store.findRecord('datasheet', params.id);
  }
});

模特：

// app/models/datasheet.js
export default DS.Model.extend({
  name: DS.attr('string'),
  name_en: DS.attr('string'),
  news: DS.attr('string'),
  news_en: DS.attr('string'),
  basic_information: DS.attr('string'),
  basic_information_en: DS.attr('string'),
  id_gradient_default: DS.attr('string'),
  icon_name: DS.attr('string'),
  icon_color: DS.attr('string'),
  order: DS.attr('string'),
  item_count: DS.attr('string'),

  categories: DS.hasMany('category')
});

// app/models/category.js
export default DS.Model.extend({
  name: DS.attr('string')
});

这是从适配器方法返回的JSON：

{
    "data": {
        "type": "datasheet",
        "id": "21",
        "attributes": {
            "name": "Projekty",
            "name_en": "Projects",
            "news": "",
            "news_en": "",
            "basic_information": "",
            "basic_information_en": "",
            "id_gradient_default": "27",
            "icon_name": "pin_flag",
            "icon_color": "",
            "order": "14"
        },
        "relationships": {
            "categories": ["18", "19", "20", "51", "52"]
        }
    },
    "included": [{
        "type": "category",
        "id": "18",
        "attributes": {
            "name": "Project"
        }
    }, {
        "type": "category",
        "id": "19",
        "attributes": {
            "name": "Activity"
        }
    }, {
        "type": "category",
        "id": "20",
        "attributes": {
            "name": "Project phase"
        }
    }, {
        "type": "category",
        "id": "51",
        "attributes": {
            "name": "Program"
        }
    }, {
        "type": "category",
        "id": "52",
        "attributes": {
            "name": "Milestone"
        }
    }]
}

Ember 检查器截图：

Answer 1

这不是正确的 JSONAPI：

 "relationships": {
   "categories": ["18", "19", "20", "51", "52"]
 }

这是正确的 JSONAPI 等价物：

"relationships": {
  "categories": {
    data: [{
      id: '18',
      type: 'category'
    },{
      id: '19',
      type: 'category'
    },{
      id: '20',
      type: 'category'
    },{
      id: '51',
      type: 'category'
    },{
      id: '52',
      type: 'category'
    }]
  }
}

所以您的数据已加载但未正确链接。当您检查 categories 关系时，您可以在 ember-inspector 中看到这一点。

Ember：访问模板中的旁加载模型关系数据

Ember: Access sideloaded model relationship data in template

model

view

relationship

ember.js

ember-data