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() {
-      switch (_this.list_filter_mode()) {
-        case 'active':
-          return function(model) {
-            return model.completed();
-          };
-        case 'completed':
-          return function(model) {
-            return !model.completed();
-          };
-        default:
-          return function() {
-            return false;
-          };
-      }
-    });
+    filter_fn = ko.computed((function(_this) {
+      return function() {
+        switch (_this.list_filter_mode()) {
+          case 'active':
+            return function(model) {
+              return model.completed();
+            };
+          case 'completed':
+            return function(model) {
+              return !model.completed();
+            };
+          default:
+            return function() {
+              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.todos_changed();
-      return !!_this.collections.todos.length;
-    });
+    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) {
-      if (!$.trim(_this.title()) || (event.keyCode !== ENTER_KEY)) {
-        return true;
-      }
-      _this.collections.todos.create({
-        title: $.trim(_this.title())
-      });
-      return _this.title('');
-    };
-    this.remaining_count = ko.computed(function() {
-      _this.todos_changed();
-      return _this.collections.todos.remainingCount();
-    });
-    this.completed_count = ko.computed(function() {
-      _this.todos_changed();
-      return _this.collections.todos.completedCount();
-    });
+    this.onAddTodo = (function(_this) {
+      return function(view_model, event) {
+        if (!$.trim(_this.title()) || (event.keyCode !== ENTER_KEY)) {
+          return true;
+        }
+        _this.collections.todos.create({
+          title: $.trim(_this.title())
+        });
+        return _this.title('');
+      };
+    })(this);
+    this.remaining_count = ko.computed((function(_this) {
+      return function() {
+        _this.todos_changed();
+        return _this.collections.todos.remainingCount();
+      };
+    })(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() {
-        return !_this.remaining_count();
-      },
-      write: function(completed) {
-        return _this.collections.todos.completeAll(completed);
-      }
+      read: (function(_this) {
+        return function() {
+          return !_this.remaining_count();
+        };
+      })(this),
+      write: (function(_this) {
+        return function(completed) {
+          return _this.collections.todos.completeAll(completed);
+        };
+      })(this)
     });
-    this.onDestroyCompleted = function() {
-      return _this.collections.todos.destroyCompleted();
-    };
+    this.onDestroyCompleted = (function(_this) {
+      return function() {
+        return _this.collections.todos.destroyCompleted();
+      };
+    })(this);
     this.loc = {
-      remaining_message: ko.computed(function() {
-        return "<strong>" + (_this.remaining_count()) + "</strong> " + (_this.remaining_count() === 1 ? 'item' : 'items') + " left";
-      }),
-      clear_message: ko.computed(function() {
-        var count;
-        if ((count = _this.completed_count())) {
-          return "Clear completed (" + count + ")";
-        } else {
-          return '';
-        }
-      })
+      remaining_message: ko.computed((function(_this) {
+        return function() {
+          return "<strong>" + (_this.remaining_count()) + "</strong> " + (_this.remaining_count() === 1 ? 'item' : 'items') + " left";
+        };
+      })(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() {
-      return _this.list_filter_mode('');
-    });
-    router.route('active', null, function() {
-      return _this.list_filter_mode('active');
-    });
-    router.route('completed', null, function() {
-      return _this.list_filter_mode('completed');
-    });
+    router.route('', null, (function(_this) {
+      return function() {
+        return _this.list_filter_mode('');
+      };
+    })(this));
+    router.route('active', null, (function(_this) {
+      return function() {
+        return _this.list_filter_mode('active');
+      };
+    })(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,34 +16,45 @@
     }, this);
     this.title = kb.observable(model, {
       key: 'title',
-      write: (function(title) {
-        if ($.trim(title)) {
-          model.save({
-            title: $.trim(title)
-          });
-        } else {
-          _.defer(function() {
-            return model.destroy();
-          });
-        }
-        return _this.editing(false);
-      })
+      write: ((function(_this) {
+        return function(title) {
+          if ($.trim(title)) {
+            model.save({
+              title: $.trim(title)
+            });
+          } else {
+            _.defer(function() {
+              return model.destroy();
+            });
+          }
+          return _this.editing(false);
+        };
+      })(this))
     }, this);
-    this.onDestroyTodo = function() {
-      return model.destroy();
-    };
-    this.onCheckEditBegin = function() {
-      if (!_this.editing()) {
-        _this.editing(true);
-        return $('.todo-input').focus();
-      }
-    };
-    this.onCheckEditEnd = function(view_model, event) {
-      if ((event.keyCode === ENTER_KEY) || (event.type === 'blur')) {
-        $('.todo-input').blur();
-        return _this.editing(false);
-      }
-    };
+    this.onDestroyTodo = (function(_this) {
+      return function() {
+        return model.destroy();
+      };
+    })(this);
+    this.onCheckEditBegin = (function(_this) {
+      return function() {
+        if (!_this.editing()) {
+          _this.editing(true);
+          return $('.todo-input').focus();
+        }
+      };
+    })(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,8 +21,10 @@ 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)
 
-	return
+	return
\ No newline at end of file