double click to edit a todo

2 files changed, 12 insertions, 4 deletions

diff --git a/index.html b/index.html
index dc0d0b6..bff8faa 100644
--- a/index.html
+++ b/index.html
@@ -17,9 +17,13 @@
   <section id="main">
     <ul id="todo-list">
       {{#each controller itemController="todo"}}
-      <li {{bindAttr class="isCompleted:completed"}}>
-        {{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
-        <label>{{title}}</label><button class="destroy"></button>
+      <li {{bindAttr class="isCompleted:completed isEditing:editing"}}>
+        {{#if isEditing}}
+          <input class="edit">
+        {{else}}
+          {{view Ember.Checkbox checkedBinding="isCompleted" class="toggle"}}
+          <label {{action "editTodo" on="doubleClick"}}>{{title}}</label><button class="destroy"></button>
+        {{/if}}
       </li>
       {{/each}}
     </ul>
diff --git a/js/controllers/todo_controller.js b/js/controllers/todo_controller.js
index e6535cb..d69df26 100644
--- a/js/controllers/todo_controller.js
+++ b/js/controllers/todo_controller.js
@@ -8,5 +8,9 @@ Todos.TodoController = Ember.ObjectController.extend({
       model.save();
       return value;
     }
-  }.property('model.isCompleted')
+  }.property('model.isCompleted'),
+  isEditing: false,
+  editTodo: function() {
+    this.set('isEditing', true);
+  },
 });