Merge pull request #746 from passy/bb-revert-amaze

Backbone: Add revert on escape

architecture-examples/backbone/js/app.js

@@ -2,6 +2,7 @@
 /*jshint unused:false */
 var app = app || {};
 var ENTER_KEY = 13;
+var ESC_KEY = 27;
 
 $(function () {
 	'use strict';

architecture-examples/backbone/js/views/todo-view.js

-/*global Backbone, jQuery, _, ENTER_KEY */
+/*global Backbone, jQuery, _, ENTER_KEY, ESC_KEY */
 var app = app || {};
 
 (function ($) {
@@ -21,6 +21,7 @@ var app = app || {};
 			'dblclick label': 'edit',
 			'click .destroy': 'clear',
 			'keypress .edit': 'updateOnEnter',
+			'keydown .edit': 'revertOnEscape',
 			'blur .edit': 'close'
 		},
 
@@ -70,6 +71,14 @@ var app = app || {};
 			var value = this.$input.val();
 			var trimmedValue = value.trim();
 
+			// We don't want to handle blur events from an item that is no
+			// longer being edited. Relying on the CSS class here has the
+			// benefit of us not having to maintain state in the DOM and the
+			// JavaScript logic.
+			if (!this.$el.hasClass('editing')) {
+				return;
+			}
+
 			if (trimmedValue) {
 				this.model.save({ title: trimmedValue });
 
@@ -93,6 +102,14 @@ var app = app || {};
 			}
 		},
 
+		// If you're pressing `escape` we revert your change by simply leaving
+		// the `editing` state.
+		revertOnEscape: function (e) {
+			if (e.which === ESC_KEY) {
+				this.$el.removeClass('editing');
+			}
+		},
+
 		// Remove the item, destroy the model from *localStorage* and delete its view.
 		clear: function () {
 			this.model.destroy();