(temporary) fix F8, F9, F10: checkboxes working other way around in C…

…hrome and IE

This works around hashspace's gh issue 224:
Instead of relying on `onChange`, each todo item has its own controller
which observes the state of the checkbox and propagates it to the parent
controller which then synchronizes the data (this can be further
refactored).

README.md

@@ -88,9 +88,9 @@ Current status of tests
        Counter
          √ should display the current number of todo items (364ms)
        Clear completed button
-         8) should display the number of completed items
-         9) should remove completed items when clicked
-         10) should be hidden when there are no items that are completed
+         √ should display the number of completed items
+         √ should remove completed items when clicked
+         √ should be hidden when there are no items that are completed
        Routing
          √ should allow me to display active items (714ms)
          11) should respect the back button

architecture-examples/hashspace/js/controllers/todoctrl.js

@@ -164,6 +164,7 @@
 			var newState = this.allChecked, todos = this.todos;
 			for (var i = 0, sz = todos.length; sz > i; i++) {
 				todos[i].completed = newState;
+				todos[i].controller.completed = newState;
 			}
 			this.syncData();
 		}

architecture-examples/hashspace/js/controllers/todoitemctrl.js

@@ -0,0 +1,36 @@
+
+/*
+ * Copyright 2014 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(function () {
+	'use strict';
+
+	var klass = require("hsp/klass");
+
+	exports.TodoItemCtrl = klass({
+		$init : function () {
+			this.todo.controller = this;
+		},
+		attributes: {
+			"todo" : { type: "object" },
+			"parentCtrl" : { type: "object" },
+			"completed" : { type: "boolean", defaultValue: false, binding: "2-way" }
+		},
+		onCompletedChange : function (newVal, oldVal) {
+			this.todo.completed = newVal;
+			this.parentCtrl.syncData();
+		}
+	});
+})();

architecture-examples/hashspace/js/templates/todo.hsp

@@ -15,6 +15,7 @@
  */
 
 var TodoUICtrl=require("../controllers/todoctrl").TodoUICtrl;
+var TodoItemCtrl=require("../controllers/todoitemctrl").TodoItemCtrl;
 
 /**
  * Main TODO template
@@ -36,7 +37,7 @@ var TodoUICtrl=require("../controllers/todoctrl").TodoUICtrl;
 				<ul id="todo-list">
 					{foreach todo in ctrl.todos}
 						{if ctrl.isInFilter(todo, ctrl.filter)}
-							<#todoItem todo="{todo}" ctrl="{ctrl}"/>
+							<#todoItem todo="{todo}" parentCtrl="{ctrl}" />
 						{/if}
 					{/foreach}
 				</ul>
@@ -75,22 +76,24 @@ var TodoUICtrl=require("../controllers/todoctrl").TodoUICtrl;
 /**
  * template displaying the todo element
  * @param todo the todo data model
- * @param ctrl the general controller
+ * @param parentCtrl the general controller
  */
-{template todoItem(todo, ctrl)}
+{template todoItem using itemCtrl:TodoItemCtrl}
+	{let parentCtrl = itemCtrl.parentCtrl}
+	{let todo = itemCtrl.todo}
 	<li class="{'completed':todo.completed, 'editing':todo.editMode}">
 		{if todo.editMode}
-			<form onsubmit="{ctrl.doneEditing(todo)}" class="editform">
+			<form onsubmit="{parentCtrl.doneEditing(todo)}" class="editform">
 				// TODO focus on node creation
-				<input type="text" class="edit" title="{ctrl.editTodo.title}" value="{ctrl.editTodo.title}"
-					onblur="{ctrl.doneEditing(todo)}"
-					onkeydown="{ctrl.todoEditKeydown(event, todo)}"  />
+				<input type="text" class="edit" title="{parentCtrl.editTodo.title}" value="{parentCtrl.editTodo.title}"
+					onblur="{parentCtrl.doneEditing(todo)}"
+					onkeydown="{parentCtrl.todoEditKeydown(event, todo)}"  />
 			</form>
 		{else}
 			<div class="view">
-				<input class="toggle" type="checkbox" value="{todo.completed}" onchange="{ctrl.syncData()}"/>
-				<label ondblclick="{ctrl.edit(todo)}">{todo.title}</label>
-				<button class="destroy" onclick="{ctrl.remove(todo)}"></button>
+				<input class="toggle" type="checkbox" value="{itemCtrl.completed}" />
+				<label ondblclick="{parentCtrl.edit(todo)}">{todo.title}</label>
+				<button class="destroy" onclick="{parentCtrl.remove(todo)}"></button>
 			</div>
 		{/if}
 	</li>