我正在学习Ember（3.21），我不明白为什么相关的项目在从商店检索时不会显示为附加到它们的父模型。我在Ember Octane中很难找到这个问题的答案，因为大多数类似的答案都是针对旧版本的，似乎没有人遇到这个问题。
对于上下文，我正在创建一个非常简单的待办事项列表应用程序。
在Ember检查器中查看，我的API正确返回，所有记录都被添加到存储中：
My（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"
}
}
}
}
]
}托多利斯模型：
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');
}在待办事项列表.hbs中：
{{#each @model as |todoList|}}
<TodoList @todoList={{todoList}} @delete={{deleteList}}/>
{{/each}}在todo-list.hbs（自定义组件〈Todolist...〉）中，**每个todo列表的标题/描述都显示得很好。**我的问题是我无法显示列表下的任何 *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数据。
任何帮助都不胜感激。
1条答案
按热度按时间bmp9r5qi1#
注意你的关系名称：在json中为“todo-item”，在代码中为“todoItems”，在json中应该设置为“todo-items”。