the editing property is removed from the todo object and moved into t…

…he root. Also - rolled back the silliness in the last edit.

labs/dependency-examples/durandal/js/viewmodels/list.js

@@ -5,23 +5,21 @@ define([
 ], function (app, shell) {
 
 	'use strict';
+
 	// represent a single todo item
-
 	var Todo = function (title, completed) {
 		this.title = ko.observable(title);
 		this.completed = ko.observable(completed);
-		this.editTitle = ko.observable(title) //we use this as a shadow for the title so that if the user exits without saving, it is not persisted.
-		this.editing = ko.observable(false);
 	};
 
 	var ViewModel = function () {
 		var self = this;
 
 		self.activate = function () {
-			//initialize the show mode 
+			//initialize the show mode
 			var filter = shell.filter;
 
-			if ( filter === undefined){
+			if (filter === undefined) {
 				filter = 'all';
 			}
 
@@ -70,6 +68,8 @@ define([
 			}
 		});
 
+		self.itemBeingEdited = ko.observable(undefined);
+
 		// remove a single todo
 		self.remove = function (todo) {
 			self.todos.remove(todo);
@@ -82,17 +82,21 @@ define([
 			});
 		};
 
+		self.isThisItemBeingEdited = function (todo) {
+			return (todo === self.itemBeingEdited());
+		};
+
 		// edit an item
 		self.editItem = function (item) {
-			item.editing(true);
+			self.itemBeingEdited(item);
 		};
 
 		// stop editing an item.  Remove the item, if it is now empty
 		self.stopEditing = function (item) {
-			item.editing(false);
+			self.itemBeingEdited(undefined);
 
 			//trim and save back
-			var trimmed = item.editTitle().trim();
+			var trimmed = item.title().trim();
 			item.title(trimmed);
 
 			if (!trimmed) {

labs/dependency-examples/durandal/js/views/list.html

@@ -4,13 +4,13 @@
 		 <label for="toggle-all">Mark all as complete</label>
  </div>
  <ul id="todo-list" data-bind="foreach: filteredTodos">
-		 <li data-bind="css: { completed: completed, editing: editing }">
+		 <li data-bind="css: { completed: completed, editing: $root.isThisItemBeingEdited($data) }">
 			<div class="view">
 			 <input class="toggle" data-bind="checked: completed" type="checkbox">
 			 <label data-bind="text: title, event: { dblclick: $root.editItem }"></label>
 			 <button class="destroy" data-bind="click: $root.remove"></button>
 	 </div>
-	 <input class="edit" data-bind="value: editTitle, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: editing, event: { blur: $root.stopEditing }">
+	 <input class="edit" data-bind="value: title, valueUpdate: 'afterkeydown', enterKey: $root.stopEditing, selectAndFocus: $root.isThisItemBeingEdited($data), event: { blur: $root.stopEditing }">
 </li>
 </ul>
 </section>