Knockback - cancel editing on escape keypress

architecture-examples/knockback/js/lib/knockout-extended-bindings.js

-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.7.1
 (function() {
-
   ko.bindingHandlers.dblclick = {
     init: function(element, value_accessor) {
       return $(element).dblclick(ko.utils.unwrapObservable(value_accessor()));

architecture-examples/knockback/js/models/todo.js

-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.7.1
 (function() {
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.Todo = (function(_super) {
-
     __extends(Todo, _super);
 
     function Todo() {

architecture-examples/knockback/js/models/todo_collection.js

-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.7.1
 (function() {
   var __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
   window.TodoCollection = (function(_super) {
-
     __extends(TodoCollection, _super);
 
     function TodoCollection() {

architecture-examples/knockback/js/viewmodels/app.js

-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.7.1
 (function() {
   var ENTER_KEY;
 
   ENTER_KEY = 13;
 
   window.AppViewModel = function() {
-    var filter_fn, router,
-      _this = this;
+    var filter_fn, router;
     this.collections = {
       todos: new TodoCollection()
     };
     this.collections.todos.fetch();
     this.list_filter_mode = ko.observable('');
-    filter_fn = ko.computed(function() {
+    filter_fn = ko.computed((function(_this) {
+      return function() {
         switch (_this.list_filter_mode()) {
           case 'active':
             return function(model) {
@@ -27,18 +27,22 @@
               return false;
             };
         }
-    });
+      };
+    })(this));
     this.todos = kb.collectionObservable(this.collections.todos, {
       view_model: TodoViewModel,
       filters: filter_fn
     });
     this.todos_changed = kb.triggeredObservable(this.collections.todos, 'change add remove');
-    this.tasks_exist = ko.computed(function() {
+    this.tasks_exist = ko.computed((function(_this) {
+      return function() {
         _this.todos_changed();
         return !!_this.collections.todos.length;
-    });
+      };
+    })(this));
     this.title = ko.observable('');
-    this.onAddTodo = function(view_model, event) {
+    this.onAddTodo = (function(_this) {
+      return function(view_model, event) {
         if (!$.trim(_this.title()) || (event.keyCode !== ENTER_KEY)) {
           return true;
         }
@@ -47,48 +51,69 @@
         });
         return _this.title('');
       };
-    this.remaining_count = ko.computed(function() {
+    })(this);
+    this.remaining_count = ko.computed((function(_this) {
+      return function() {
         _this.todos_changed();
         return _this.collections.todos.remainingCount();
-    });
-    this.completed_count = ko.computed(function() {
+      };
+    })(this));
+    this.completed_count = ko.computed((function(_this) {
+      return function() {
         _this.todos_changed();
         return _this.collections.todos.completedCount();
-    });
+      };
+    })(this));
     this.all_completed = ko.computed({
-      read: function() {
+      read: (function(_this) {
+        return function() {
           return !_this.remaining_count();
-      },
-      write: function(completed) {
+        };
+      })(this),
+      write: (function(_this) {
+        return function(completed) {
           return _this.collections.todos.completeAll(completed);
-      }
+        };
+      })(this)
     });
-    this.onDestroyCompleted = function() {
+    this.onDestroyCompleted = (function(_this) {
+      return function() {
         return _this.collections.todos.destroyCompleted();
       };
+    })(this);
     this.loc = {
-      remaining_message: ko.computed(function() {
+      remaining_message: ko.computed((function(_this) {
+        return function() {
           return "<strong>" + (_this.remaining_count()) + "</strong> " + (_this.remaining_count() === 1 ? 'item' : 'items') + " left";
-      }),
-      clear_message: ko.computed(function() {
+        };
+      })(this)),
+      clear_message: ko.computed((function(_this) {
+        return function() {
           var count;
           if ((count = _this.completed_count())) {
             return "Clear completed (" + count + ")";
           } else {
             return '';
           }
-      })
+        };
+      })(this))
     };
     router = new Backbone.Router;
-    router.route('', null, function() {
+    router.route('', null, (function(_this) {
+      return function() {
         return _this.list_filter_mode('');
-    });
-    router.route('active', null, function() {
+      };
+    })(this));
+    router.route('active', null, (function(_this) {
+      return function() {
         return _this.list_filter_mode('active');
-    });
-    router.route('completed', null, function() {
+      };
+    })(this));
+    router.route('completed', null, (function(_this) {
+      return function() {
         return _this.list_filter_mode('completed');
-    });
+      };
+    })(this));
     Backbone.history.start();
   };
 

architecture-examples/knockback/js/viewmodels/todo.js

-// Generated by CoffeeScript 1.3.3
+// Generated by CoffeeScript 1.7.1
 (function() {
-
   window.TodoViewModel = function(model) {
-    var ENTER_KEY,
-      _this = this;
+    var ENTER_KEY, ESCAPE_KEY;
     ENTER_KEY = 13;
+    ESCAPE_KEY = 27;
     this.editing = ko.observable(false);
     this.completed = kb.observable(model, {
       key: 'completed',
@@ -17,7 +16,8 @@
     }, this);
     this.title = kb.observable(model, {
       key: 'title',
-      write: (function(title) {
+      write: ((function(_this) {
+        return function(title) {
           if ($.trim(title)) {
             model.save({
               title: $.trim(title)
@@ -28,23 +28,33 @@
             });
           }
           return _this.editing(false);
-      })
+        };
+      })(this))
     }, this);
-    this.onDestroyTodo = function() {
+    this.onDestroyTodo = (function(_this) {
+      return function() {
         return model.destroy();
       };
-    this.onCheckEditBegin = function() {
+    })(this);
+    this.onCheckEditBegin = (function(_this) {
+      return function() {
         if (!_this.editing()) {
           _this.editing(true);
           return $('.todo-input').focus();
         }
       };
-    this.onCheckEditEnd = function(view_model, event) {
+    })(this);
+    this.onCheckEditEnd = (function(_this) {
+      return function(view_model, event) {
+        if (event.keyCode === ESCAPE_KEY) {
+          _this.editing(false);
+        }
         if ((event.keyCode === ENTER_KEY) || (event.type === 'blur')) {
           $('.todo-input').blur();
           return _this.editing(false);
         }
       };
+    })(this);
   };
 
 }).call(this);

architecture-examples/knockback/src/viewmodels/todo.coffee

 window.TodoViewModel = (model) ->
 	ENTER_KEY = 13
+	ESCAPE_KEY = 27
 
 	@editing = ko.observable(false)
 	@completed = kb.observable(model, {key: 'completed', read: (-> return model.completed()), write: ((completed) -> model.completed(completed)) }, @)
@@ -20,6 +21,8 @@ window.TodoViewModel = (model) ->
 			$('.todo-input').focus()
 
 	@onCheckEditEnd = (view_model, event) =>
+		if (event.keyCode == ESCAPE_KEY)
+			@editing(false)
 		if (event.keyCode == ENTER_KEY) or (event.type == 'blur')
 			$('.todo-input').blur()
 			@editing(false)