ember.js - 为什么使用 itemController 会呈现空项目的集合？

Question

我目前正在学习 Ember，同时使用 ember-cli 学习 todomvc 教程:http://thetechcofounder.com/getting-started-with-ember-js-using-ember-cli/

我所在的部分是为了编辑待办事项，需要添加 editTodo行动在TodoController .到目前为止一切顺利，但它也说使用 itemController在 each Handlebars 助手告诉每个待办事项使用特定的 Controller

.

问题是当我添加 itemController至 each在模板中(使用 Emblem.js: each itemController='todo' )，模板不再呈现集合中每个项目的标题，它只会将它们呈现为空白:



我不明白为什么会发生这种情况。

模板提取

section#main
  ul#todo-list
    each
      li class={isCompleted:completed}
        if isEditing
          input.edit
        else
          = input class='toggle' type='checkbox' checked=isCompleted
          label{action 'editTodo' on='doubleClick'}= title
          button.destroy
  input#toggle-all type='checkbox'

Controller 提取

`import Ember from 'ember'`

TodoController = Ember.Controller.extend
  actions:
    editTodo: ->
      @set 'isEditing', true

`export default TodoController`

Answer 1

项目 Controller 必须是 Ember.ObjectController 成功呈现每个项目及其相关数据。 ObjectControllers 用于装饰 ArrayController 中的单个项目。使用 'TodosListController' ArrayController 中的 itemController 属性来声明项目 Controller :

    itemController: 'todo',

然后，当按照引用教程中的建议创建“todo”项 Controller 类定义时，请注意 Ember CLI 的“生成 Controller ”命令将创建一个标准的 Ember Controller 。标准 Controller 和 ArrayController 代表多个项目(如“TodosController”或“TodosListController”)。因此， TodoController 应该扩展 Ember.ObjectController 来表示单个项目:

    `import Ember from 'ember'`

    TodoController = Ember.ObjectController.extend
      actions:
        editTodo: ->
          @set 'isEditing', true

    `export default TodoController`

与问题一起发布的标准 Ember.Controller 在通过“每个”帮助程序传递时无法正确显示每个单独的待办事项，因为标准 Controller 的模型正在引用所有类型为“待办事项”的记录的过滤集合'，而不是特定的单个待办事项记录。

我创建了一个 JS Bin说明 - 只需在使用 Ember.Controller 和使用 Ember.ObjectController 之间切换“TodoController”，看看标准 Controller 失败。

此外，这不是问题的原因，但为了防止它被忽略，列表项类属性声明中缺少“isEditing:editing”:

    section#main
      ul#todo-list
        each itemController='todo'
          li class={isCompleted:completed, isEditing:editing} // <-- here
            if ...