5

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

enter image description here.

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:

enter image description here

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`
jacefarm
  • 6,747
  • 6
  • 36
  • 46
bbonamin
  • 30,042
  • 7
  • 40
  • 49
  • Just to point out, your code excerpts look nothing like the tutorial... cofeeScript? Perhaps put together a jsBin or fiddle so we could see the whole thing. – Stevo Perisic Sep 28 '14 at 02:44
  • Hi @StevoPersic, I am using emblem & coffeescript, that's why it looks different, but the underlying code is the same – bbonamin Sep 29 '14 at 21:33

1 Answers1

4

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 ...
jacefarm
  • 6,747
  • 6
  • 36
  • 46
  • Thanks @jacefarm! I wonder if you may happen to know why putting ```itemController``` at ```{{#each}}``` doesn't work for ember? I tried to do exactly as the tutorial said with ArrayController and ObjectController and put the ```itemController="todo"``` with in {{#each}} bracket, which doesn't work and throw me an error, however, then I tried as you said and put that one within todosController and that works...What's the difference between these two approaches? – yeelan May 20 '15 at 19:05
  • @yeelan It's best to search for an answer, or post a new question with your issue, rather than have it here in the comments. – jacefarm Jun 10 '15 at 18:14