thorax: Cancel editing with the Escape key

examples/thorax/js/app.js

 /*global Thorax, Backbone*/
 /*jshint unused:false*/
 var ENTER_KEY = 13;
+var ESCAPE_KEY = 27;
 
 (function () {
 	'use strict';

examples/thorax/js/views/todo-item.js

-/*global Thorax, ENTER_KEY*/
+/*global Thorax, ENTER_KEY, ESCAPE_KEY*/
 (function () {
 	'use strict';
 
@@ -19,7 +19,7 @@
 			'click .toggle':	'toggleCompleted',
 			'dblclick label':	'edit',
 			'click .destroy':	'clear',
-			'keypress .edit':	'updateOnEnter',
+			'keyup .edit':		'keyListener',
 			'blur .edit':		'close',
 			// The "rendered" event is triggered by Thorax each time render()
 			// is called and the result of the template has been appended
@@ -37,11 +37,16 @@
 		// Switch this view into `"editing"` mode, displaying the input field.
 		edit: function () {
 			this.$el.addClass('editing');
-			this.$('.edit').focus();
+			this.$('.edit').val(this.model.get('title')).focus();
 		},
 
-		// Close the `"editing"` mode, saving changes to the todo.
+		// Close the `"editing"` mode.
 		close: function () {
+			// If editing was cancelled, don't save
+			if (!this.$el.hasClass('editing')) {
+				return;
+			}
+
 			var value = this.$('.edit').val().trim();
 
 			if (value) {
@@ -53,10 +58,17 @@
 			this.$el.removeClass('editing');
 		},
 
-		// If you hit `enter`, we're through editing the item.
-		updateOnEnter: function (e) {
+		// User cancelled editing, don't update the todo.
+		cancelEdits: function () {
+			this.$el.removeClass('editing');
+		},
+
+		// Enter completes the editing, Escape cancels it
+		keyListener: function (e) {
 			if (e.which === ENTER_KEY) {
 				this.close();
+			} else if (e.which === ESCAPE_KEY) {
+				this.cancelEdits();
 			}
 		},