Remove todo item, if edited item is blank or just whitespace

Author: rniemeyer

architecture-examples/knockoutjs/index.html

@@ -17,13 +17,13 @@ <h1>Todos</h1>
         <label for="toggle-all">Mark all as complete</label>
         <ul id="todo-list" data-bind="foreach: todos">
             <li data-bind="css: { done: done, editing: editing }">
-                <div class="view" data-bind="event: { dblclick: edit }">
+                <div class="view" data-bind="event: { dblclick: $root.editItem }">
                     <input class="toggle" type="checkbox" data-bind="checked: done">
                     <label data-bind="text: content"></label>
                     <a class="destroy" href="#" data-bind="click: $root.remove"></a>
                 </div>
                 <input class="edit" type="text"
-                       data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: stopEditing, selectAndFocus: editing, event: { blur: stopEditing }"/>
+                       data-bind="value: content, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }"/>
             </li>
         </ul>
     </section>

architecture-examples/knockoutjs/js/app.js

@@ -68,16 +68,6 @@
         this.editing = ko.observable(false);
     };
 
-    //can place methods on prototype, as there can be many todos
-    ko.utils.extend(Todo.prototype, {
-        edit:function () {
-            this.editing(true);
-        },
-        stopEditing:function () {
-            this.editing(false);
-        }
-    });
-
     //our main view model
     var ViewModel = function (todos) {
         var self = this;
@@ -110,6 +100,19 @@
                 return todo.done();
             });
         };
+        
+        //edit an item
+        self.editItem = function(item) {
+            item.editing(true);
+        };
+        
+        //stop editing an item.  Remove the item, if it is now empty
+        self.stopEditing = function(item) {
+            item.editing(false);
+            if (!item.content().trim()) {
+                self.remove(item);
+            }
+        };
 
         //count of all completed todos
         self.completedCount = ko.computed(function () {