Come dichiarare il controller articolo in un controller di array - ember.js

Question

Sto provando a scrivere l'app Todo (utilizzando ember-cli). Quando ho aggiunto percorsi attivi e completi sotto la mia risorsa todos il mio controller articolo ha smesso di funzionare. Prima di usare itemController nel controller Array per impostare il controller dell'oggetto.

router.js

import Ember from 'ember'; 

var Router = Ember.Router.extend({ 
    location: TodoMVCENV.locationType }); 

Router.map(function() { 
    this.resource('todos', { path: '/' }, function() { 
     this.route('active'); 
     this.route('complete'); 
    }); 
}); 

export default Router; 

controller/todos.js

import Ember from 'ember'; 

var TodosController = Ember.ArrayController.extend({ 
    actions: { 
     createTodo: function() { 
      // Get the todo title set by the "New Todo" text field 
      var title = this.get('newTitle'); 

      // Create the new Todo model 
      var todo = this.store.createRecord('todo', { 
       title: title, 
       isCompleted: false 
      }); 

      // Clear the "New Todo" text field 
      this.set('newTitle', ''); 

      // Save the new model 
      todo.save(); 
     } 
    }, 

    itemController: 'todo', 

    allAreDone: function(key, value) { 
     if (value === undefined) { 
      return this.get('length') > 0 && this.everyProperty('isCompleted', true); 
     } 
     else { 
      this.setEach('isCompleted', value); 
      this.invoke('save'); 
      return value; 
     } 
    }.property('@each.isCompleted'), 

    hasCompleted: function() { 
     return this.get('completed') > 0; 
    }.property('completed'), 

    completed: function() { 
     return this.filterBy('isCompleted', true).get('length'); 
    }.property('@each.isCompleted'), 

    remaining: function() { 
     return this.filterBy('isCompleted', false).get('length'); 
    }.property('@each.isCompleted'), 

    inflection: function() { 
     var remaining = this.get('remaining'); 
     return (remaining === 1) ? 'item' : 'items'; 
    }.property('remaining') 
}); 

export default TodosController; 

controllori/todo.js

import Ember from 'ember'; 

var TodoController = Ember.ObjectController.extend({ 
    actions: { 
     editTodo: function() { 
      this.set('isEditing', true); 
     }, 
     acceptChanges: function() { 
      // Remove is editing property 
      this.set('isEditing', false); 

      // If the todo is empty, delete it 
      // otherwise save it with the new title 
      if(Ember.isEmpty(this.get('model.title'))) { 
       this.send('removeTodo'); 
      } else { 
       this.get('model').save(); 
      } 
     }, 
     removeTodo: function() { 
      var todo = this.get('model'); 
      todo.deleteRecord(); 
      todo.save(); 
     } 
    } 
}); 

export default TodoController; 

Prima ho aggiunto i miei percorsi nidificati, le azioni in todo. js ha funzionato, ora io quando provo una qualsiasi delle azioni in todo.js ottengo il seguente nella console:

Uncaught Error: Nothing handled the action 'editTodo'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble. 

Aggiunta di modelli sottostanti dai commenti ....

templates/todos.hbs

{{input type="text" id="new-todo" placeholder="What needs to be done?" 
    value=newTitle action="createTodo"}} 

{{outlet}} 

<footer id="footer"> 
    <span id="todo-count"> 
     <strong>{{remaining}}</strong> {{inflection}} left 
    </span> 
    <ul id="filters"> 
     <li> 
      {{#link-to "todos.index" activeClass="selected"}}All{{/link-to}} 
     </li> 
     <li> 
      {{#link-to "todos.active" activeClass="selected"}}Active{{/link-to}} 
     </li> 
     <li> 
      {{#link-to "todos.complete" activeClass="selected"}}Active{{/link-to}} 
     </li> 
    </ul> 

    <button id="clear-completed"> 
     Clear completed (1) 
    </button> 
</footer> 

templates/todos/index.hbs

<section id="main"> 
    <ul id="todo-list"> 
     {{#each}} 
      <li {{bind-attr class="isCompleted:completed isEditing:editing"}}> 
       {{#if isEditing}} 
        {{input type="text" class="edit" value=title focus-out="acceptChanges" 
         insert-newline="acceptChanges"}} 
       {{else}} 
        {{input type="checkbox" checked=isCompleted class="toggle"}} 
        <label {{action "editTodo" on="doubleClick"}}>{{title}}</label> 
        <button {{action "removeTodo"}} class="destroy"></button> 
       {{/if}} 
      </li> 
     {{/each}} 
    </ul> 
</section> 

Answer 1

Cambia il modello a :

{{#each todo in content itemController="todo"}} 
    {{#with todo}} 
     ... 
    {{/with}} 
{{/each}} 

Ho aggiunto il blocco {{con}} a causa degli aggiornamenti in Ember 1.6.0 e la modifica nell'ambito di riferimento here.

Mi piace aggiungere più markup ai modelli come questo per altri sviluppatori per essere in grado di riconoscere rapidamente cosa sta succedendo in javascript senza dover aprire il controller della rotta.

È anche possibile sostituire "contenuto" con "arrangedContent" se si decide di impostare #sortProperties sul controller di array.