我正在学习 Ember（3.21），并且不知道为什么在从商店检索时相关项目不会显示为附加到其父模型。我在 Ember Octane 中找不到这个问题的答案，因为大多数类似的答案都是针对旧版本的，而且似乎没有人遇到这个问题。
对于上下文，我正在创建一个非常简单的待办事项列表应用程序。
查看 Ember 检查器，我的 api 正确返回，所有记录都添加到存储中：
我的（JSON）rails api 像这样返回数据：
{
"data": {
"id": "1",
"type": "todo-lists",
"attributes": {
"title": "Test List 1",
"description": "This is the first test list."
},
"relationships": {
"todo-item": {
"data": [
{
"id": "1",
"type": "todo-items"
},
{
"id": "4",
"type": "todo-items"
},
{
"id": "5",
"type": "todo-items"
},
{
"id": "6",
"type": "todo-items"
},
{
"id": "7",
"type": "todo-items"
},
{
"id": "8",
"type": "todo-items"
},
{
"id": "9",
"type": "todo-items"
},
{
"id": "10",
"type": "todo-items"
},
{
"id": "11",
"type": "todo-items"
},
{
"id": "12",
"type": "todo-items"
},
{
"id": "13",
"type": "todo-items"
}
]
}
}
},
"included": [
{
"id": "1",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-19T17:43:10.977Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "4",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:13.861Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "5",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:29.852Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "6",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 2",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:29.891Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "7",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 3",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:04:29.927Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "8",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:11:29.504Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "9",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 2",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:11:29.552Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "10",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 3",
"completed": false,
"deleted": false,
"due": "2020-09-20T01:11:29.589Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "11",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 1",
"completed": false,
"deleted": false,
"due": "2020-09-21T13:23:00.793Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "12",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 2",
"completed": false,
"deleted": false,
"due": "2020-09-21T13:23:00.856Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
},
{
"id": "13",
"type": "todo-items",
"attributes": {
"description": "Test Todo Item 3",
"completed": false,
"deleted": false,
"due": "2020-09-21T13:23:00.884Z"
},
"relationships": {
"todo-list": {
"data": {
"id": "1",
"type": "todo-lists"
}
}
}
}
]
}
todolist模型：
export default class TodoListModel extends Model {
@hasMany('todoItem') todoItems;
@attr('string') title;
@attr('string') description;
}
商品型号：
export default class TodoItemModel extends Model {
@belongsTo('todoList') list;
@attr('string') description;
@attr('boolean') completed;
@attr('boolean') deleted;
@attr('date') due;
@attr('date') created;
}
因此，我使用 TodoListsRoute 中的 ember 数据存储填充我的模型：
model() {
return this.store.findAll('todo-list');
}
在 todo-lists.hbs 中：
{{#each @model as |todoList|}}
<TodoList @todoList={{todoList}} @delete={{deleteList}}/>
{{/each}}
在 todo-list.hbs（称为 <Todolist ...> 的自定义组件）中，每个 todo 列表标题/描述都可以正常显示。 我的问题是我无法显示列表下方的任何待办事项。这是我尝试这样做的代码：
<div class="todo-list-items">
<div>
<button class="delete-button" {{on 'click' deleteList}}><i class="fas fa-trash"></i></button>
</div>
{{#each @todoList.todoItems as |listItem|}}
<div>
{{listItem.id}}
</div>
{{/each}}
</div>
登录this.args.todoList.todoItems到控制台会返回一个完整的类，但它似乎不包含任何实际的 todoItem 数据。
非常感谢任何帮助。