为啥使用 itemController 会呈现空项目的集合？

Posted 2023-03-03

【中文标题】为啥使用 itemController 会呈现空项目的集合？

【英文标题】：Why is that using itemController renders a collection of empty items?为什么使用 itemController 会呈现空项目的集合？

【发布时间】：2014-11-18 10:06:38

【问题描述】：

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

我正在编辑待办事项的部分，需要在TodoController 中添加editTodo 操作。到目前为止一切顺利，但它还说在 each 车把助手上使用 itemController 来告诉每个待办事项使用特定的控制器

。

问题是当我在模板中将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
          labelaction 'editTodo' on='doubleClick'= title
          button.destroy
  input#toggle-all type='checkbox'

控制器提取

`import Ember from 'ember'`

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

`export default TodoController`

【问题讨论】：

只是要指出，您的代码摘录看起来不像教程...... cofeeScript？也许把一个 jsBin 或 fiddle 放在一起，这样我们就可以看到整个事情了。

嗨@StevoPersic，我使用的是徽章和coffeescript，这就是为什么它看起来不同，但底层代码是一样的

【参考方案1】：

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

    itemController: 'todo',

然后，当按照参考教程中的建议创建“待办事项”项目控制器类定义时，请注意 Ember CLI 的“生成控制器”命令将创建一个标准的 Ember 控制器。标准控制器和 ArrayControllers 代表多个项目（如“TodosController”或“TodosListController”）。因此，TodoController 应该扩展 Ember.ObjectController 来表示单个项目：

    `import Ember from 'ember'`

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

    `export default TodoController`

一个标准的 Ember.Controller，正如问题所发布的，当通过“每个”帮助器传递时，无法正确显示每个单独的待办事项，因为标准控制器的模型引用了所有记录的过滤集键入“todo”，而不是特定的单个 todo 记录。

我创建了一个JS Bin 来说明 - 只需在使用 Ember.Controller 和使用 Ember.ObjectController 作为“TodoController”之间切换，即可看到标准控制器失败。

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

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

【讨论】：

谢谢@jacefarm！我想知道您是否知道为什么将itemController 放在#each 上对ember 不起作用？我尝试完全按照教程对 ArrayController 和 ObjectController 所说的做，并将 itemController="todo" 放在 #each 括号中，但这不起作用并抛出错误，但是，然后我按照你所说的进行尝试并放入todosController 中的那个并且有效...这两种方法有什么区别？

@yeelan 最好搜索答案，或在您的问题中发布新问题，而不是在 cmets 中。