Merge pull request #919 from dprotti/typescriptbackbone824

Typescript-backbone: fixes for #824

labs/architecture-examples/typescript-backbone/js/app.js

@@ -132,8 +132,9 @@ var TodoView = (function (_super) {
             'click .check': 'toggleDone',
             'dblclick label.todo-content': 'edit',
             'click button.destroy': 'clear',
-            'keypress .todo-input': 'updateOnEnter',
-            'blur .todo-input': 'close'
+            'keypress .edit': 'updateOnEnter',
+            'keydown .edit': 'revertOnEscape',
+            'blur .edit': 'close'
         };
 
         _super.call(this, options);
@@ -165,14 +166,32 @@ var TodoView = (function (_super) {
 
     // Close the `'editing'` mode, saving changes to the todo.
     TodoView.prototype.close = function () {
-        this.model.save({ content: this.input.val() });
+        var trimmedValue = this.input.val().trim();
+
+        if (trimmedValue) {
+            this.model.save({ content: trimmedValue });
+        } else {
+            this.clear();
+        }
+
         this.$el.removeClass('editing');
     };
 
     // If you hit `enter`, we're through editing the item.
     TodoView.prototype.updateOnEnter = function (e) {
-        if (e.keyCode == TodoView.ENTER_KEY)
-            close();
+        if (e.which == TodoView.ENTER_KEY)
+            this.close();
+    };
+
+    // If you're pressing `escape` we revert your change by simply leaving
+    // the `editing` state.
+    TodoView.prototype.revertOnEscape = function (e) {
+        if (e.which == TodoView.ESC_KEY) {
+            this.$el.removeClass('editing');
+
+            // Also reset the hidden input back to the original value.
+            this.input.val(this.model.get('content'));
+        }
     };
 
     // Remove the item, destroy the model.
@@ -180,6 +199,7 @@ var TodoView = (function (_super) {
         this.model.clear();
     };
     TodoView.ENTER_KEY = 13;
+    TodoView.ESC_KEY = 27;
     return TodoView;
 })(Backbone.View);
 

labs/architecture-examples/typescript-backbone/js/app.ts

@@ -179,6 +179,7 @@ class TodoView extends Backbone.View {
 	input: any;
 
 	static ENTER_KEY:number = 13;
+	static ESC_KEY:number = 27;
 
 	constructor (options? ) {
 		//... is a list tag.
@@ -189,8 +190,9 @@ class TodoView extends Backbone.View {
 			'click .check': 'toggleDone',
 			'dblclick label.todo-content': 'edit',
 			'click button.destroy': 'clear',
-			'keypress .todo-input': 'updateOnEnter',
-			'blur .todo-input': 'close'
+			'keypress .edit': 'updateOnEnter',
+			'keydown .edit': 'revertOnEscape',
+			'blur .edit': 'close'
 		};
 
 		super(options);
@@ -223,13 +225,30 @@ class TodoView extends Backbone.View {
 
 	// Close the `'editing'` mode, saving changes to the todo.
 	close() {
-		this.model.save({ content: this.input.val() });
+		var trimmedValue = this.input.val().trim();
+
+		if (trimmedValue) {
+			this.model.save({ content: trimmedValue });
+		} else {
+			this.clear();
+		}
+
 		this.$el.removeClass('editing');
 	}
 
 	// If you hit `enter`, we're through editing the item.
 	updateOnEnter(e) {
-		if (e.keyCode == TodoView.ENTER_KEY) close();
+		if (e.which == TodoView.ENTER_KEY) this.close();
+	}
+
+	// If you're pressing `escape` we revert your change by simply leaving
+	// the `editing` state.
+	revertOnEscape(e) {
+		if (e.which == TodoView.ESC_KEY) {
+			this.$el.removeClass('editing');
+			// Also reset the hidden input back to the original value.
+			this.input.val(this.model.get('content'));
+		}
 	}
 
 	// Remove the item, destroy the model.