Why is itemController showing a collection of empty items?

Question

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

I am in the section where to edit todo you need to add the editTodo action to TodoController . So far so good, but it also says use itemController in the descriptor helper each to tell each todo to use a specific controller

.

The fact is that by adding itemController to each to the template (using Emblem.js: each itemController='todo' ), the template no longer displays the title of each item in the collection, it only makes them empty

I do not understand why this is happening.

Extract pattern

 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

The element controller must be an Ember.ObjectController in order to successfully display each element and its associated data. ObjectControllers are used to decorate individual elements in an ArrayController. Use the itemController property in the ArrayController "TodosListController" to declare the item's controller:

  itemController: 'todo', 

Then, when creating the “todo” controller class definition, as suggested in the reference guide, note that the Ember CLI “generate controller” command will create a standard Ember Controller. Standard controllers and ArrayControllers are a few elements (for example, "TodosController" or "TodosListController"). Thus, TodoController must extend Ember.ObjectController to represent individual elements:

  `import Ember from 'ember'` TodoController = Ember.ObjectController.extend actions: editTodo: -> @set 'isEditing', true `export default TodoController` 

The standard Ember.Controller element, which is sent with a question, cannot display each of the individual todos correctly when it is passed through the "every" helper, because the model for the standard controller refers to the filtered set of all records, enter "todo" instead of a separate record of one todo .

Ive created JS Bin to illustrate - just switch between using Ember.Controller and using Ember.ObjectController for "TodoController" to see the standard controller is not working.

In addition, this is not the cause of the problem, but just in case it was missed, the attribute of the list class attribute is missing the isEditing: edit attribute:

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