相关对象即使存在于数据存储中也不显示

Question

我正在学习 Ember (3.21)，但我很困惑为什么相关商品在从商店检索时不会显示为附加到它们的父模型。我在 Ember Octane 中找不到这个问题的答案，因为大多数类似的答案都是针对旧版本的，而且似乎没有人遇到这个问题。

对于上下文，我正在创建一个非常简单的待办事项列表应用程序。

查看 Ember 检查器，我的 api returns 正确并且所有记录都添加到存储中：

我的(JSON) rails api returns 数据是这样的：

{
  "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');
}

待办事项-lists.hbs:

    {{#each @model as |todoList|}}
       <TodoList @todoList={{todoList}} @delete={{deleteList}}/>
    {{/each}}

在 todo-list.hbs（自定义组件称为），每个待办列表 title/description 显示正常。 我的问题是我无法显示列表下方的任何 待办事项。这是我尝试执行此操作的代码：

<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 记录到控制台 returns 一个完整的 class，但它似乎不包含任何实际的 todoItem 数据。

非常感谢任何帮助。

Answer 1

注意您的关系名称：在 json 中是“todo-item”，而在代码中是“todoItems”。您应该在 json.

中将其设置为“todo-items”

相关对象即使存在于数据存储中也不显示

Related objects not showing even when present in data store

ember.js

ember-data

ember-octane