Why is that using itemController renders a collection of empty items?

Question

I'm currently learning Ember while following the todomvc tutorial with ember-cli: http://thetechcofounder.com/getting-started-with-ember-js-using-ember-cli/

I'm in the section where in order to edit a todo, it's needed to add the editTodo action in the TodoController. So far so good, but it also says to use itemController on the each handlebars helper to tell each todo to use a specific controller

.

The thing is that when I add itemController to each in the template (using Emblem.js: each itemController='todo'), the template no longer renders the title of each item on the collection, it only renders them blank:

I cannot understand why this happens.

Template extract

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 extract

`import Ember from 'ember'`

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

`export default TodoController`

Answer 1

An item controller must be an Ember.ObjectController to successfully render each item and its associated data. ObjectControllers are used to decorate individual items within an ArrayController. Use the itemController property in the 'TodosListController' ArrayController to declare the item controller:

    itemController: 'todo',

Then, when creating the 'todo' item controller class definition as suggested in the referenced tutorial, observe that the Ember CLI 'generate controller' command will create a standard Ember Controller. Standard Controllers and ArrayControllers represent multiple items (like the 'TodosController' or 'TodosListController'). Thus, the TodoController should extend Ember.ObjectController to represent singular items:

    `import Ember from 'ember'`

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

    `export default TodoController`

A standard Ember.Controller, as posted with the question, fails to display each of the individual todos properly, when passed via the 'each' helper, because the model for the standard controller is referencing a filtered set of all records of type 'todo', instead of a particular, single todo record.

I’ve created a JS Bin to illustrate - just toggle between using Ember.Controller and using Ember.ObjectController for the 'TodoController', to see the standard controller fail.

Also, not the cause of the issue, but just in case it was overlooked, the ‘isEditing:editing’ is missing from the list-item class attribute declaration:

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