wip

app/controllers/todo.js → app/components/todo-item.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
-export default Ember.Controller.extend({
+export default Ember.Component.extend({
   actions: {
     editTodo: function() {
       this.set('isEditing', true);

app/templates/components/todo-item.hbs

@@ -0,0 +1,14 @@
+<li class="{{if isCompleted 'completed'}} {{if isEditing 'editing'}}">
+  {{#if isEditing}}
+    {{input class="edit"
+            value=model.title
+            focus-out="acceptChanges"
+            insert-newline="acceptChanges"
+            autofocus="autofocus"
+    }}
+  {{else}}
+    {{input type="checkbox" checked=isCompleted class="toggle"}}
+    <label {{action "editTodo" on="doubleClick"}}>{{model.title}}</label>
+    <button {{action "removeTodo"}} class="destroy"></button>
+  {{/if}}
+</li>

app/templates/todos/index.hbs

@@ -1,18 +1,5 @@
 <ul id="todo-list">
-  {{#each todo in this itemController="todo"}}
-    <li class="{{if todo.isCompleted 'completed'}} {{if todo.isEditing 'editing'}}">
-      {{#if todo.isEditing}}
-        {{input class="edit"
-                value=todo.model.title
-                focus-out="acceptChanges"
-                insert-newline="acceptChanges"
-                autofocus="autofocus"
-        }}
-      {{else}}
-        {{input type="checkbox" checked=todo.isCompleted class="toggle"}}
-        <label {{action "editTodo" on="doubleClick"}}>{{todo.model.title}}</label>
-        <button {{action "removeTodo"}} class="destroy"></button>
-      {{/if}}
-    </li>
+  {{#each this as |todo|}}
+    {{todo-item model=todo.model}}
   {{/each}}
 </ul>

package.json

@@ -14,7 +14,7 @@
     "bower": "1.4.1",
     "broccoli-asset-rev": "2.0.3",
     "broccoli-clean-css": "1.0.0",
-    "ember-cli": "0.2.3",
+    "ember-cli": "0.2.7",
     "ember-cli-app-version": "0.3.3",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-htmlbars": "0.7.6",