【发布时间】：2020-09-20 01:33:56
【问题描述】：
我正在学习 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;
}
所以，我使用 ember 数据存储填充我的模型 在 TodoListsRoute 中：
model() {
return this.store.findAll('todo-list');
}
在 todo-lists.hbs 中：
{{#each @model as |todoList|}}
<TodoList @todoList={{todoList}} @delete={{deleteList}}/>
{{/each}}
在 todo-list.hbs（称为
<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 数据。
非常感谢任何帮助。
【问题讨论】：
-
我认为我们需要更多信息来追踪问题。您能否包括模型定义和来自您后端对
store.findAll('todo-list')的响应？ -
我觉得不错。如果没有复制，很难说出发生了什么。当说
this.args.todoList.todoItems似乎不包含任何todoItem时，您的意思是它的length属性为零，不是吗？也可以在模板中打上{{log @todoList.todoItems.length}}进行验证。 -
将长度放到页面上返回 0 :(
-
项目是否公开？可以将代码推送到 GitHub 或 GitLab 吗？
-
我已邀请你到 github 上的 repos :)
标签： ember.js ember-data ember-octane