From 49acf17321299f58af767aea8bd562524fea7653 Mon Sep 17 00:00:00 2001
From: Ryan Niemeyer <rniemeyer@gmail.com>
Date: Thu, 5 Jan 2012 00:28:56 -0600
Subject: [PATCH 1/2] Add "Mark all as complete" checkbox bound to a writeable
 computed observable and minor code cleanup.

---
 todo-example/knockoutjs/index.html  |  4 ++++
 todo-example/knockoutjs/js/todos.js | 35 ++++++++++++++++++++---------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/todo-example/knockoutjs/index.html b/todo-example/knockoutjs/index.html
index 2ab918158f..032becce78 100644
--- a/todo-example/knockoutjs/index.html
+++ b/todo-example/knockoutjs/index.html
@@ -15,6 +15,10 @@ <h1>Todos</h1>
                 <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span>
             </div>
             <div id="todos">
+                <div data-bind="visible: todos().length">
+                    <input id="check-all" class="check" type="checkbox" data-bind="checked: allCompleted" />
+                    <label for="check-all">Mark all as complete</label>
+                </div>
                 <ul id="todo-list" data-bind="foreach: todos">
                     <li data-bind="css: { editing: editing }">
                         <div class="todo" data-bind="css: { done : done }">
diff --git a/todo-example/knockoutjs/js/todos.js b/todo-example/knockoutjs/js/todos.js
index 6a56746e97..eeb2802424 100644
--- a/todo-example/knockoutjs/js/todos.js
+++ b/todo-example/knockoutjs/js/todos.js
@@ -40,51 +40,66 @@
     var ViewModel = function(todos) {
         var self = this;
         //map array of passed in todos to an observableArray of Todo objects
-        this.todos = ko.observableArray(ko.utils.arrayMap(todos, function(todo) {
+        self.todos = ko.observableArray(ko.utils.arrayMap(todos, function(todo) {
             return new Todo(todo.content, todo.done);
         }));
 
         //store the new todo value being entered
-        this.current = ko.observable();
+        self.current = ko.observable();
 
         //add a new todo, when enter key is pressed
-        this.add = function (data, event) {
+        self.add = function (data, event) {
             var newTodo = new Todo(self.current());
             self.todos.push(newTodo);
             self.current("");
         };
 
         //remove a single todo
-        this.remove = function (todo) {
+        self.remove = function (todo) {
             self.todos.remove(todo);
         };
 
         //remove all completed todos
-        this.removeCompleted = function () {
+        self.removeCompleted = function () {
             self.todos.remove(function(todo) {
                 return todo.done();
             });
         };
 
         //count of all completed todos
-        this.completedCount = ko.computed(function () {
+        self.completedCount = ko.computed(function () {
             return ko.utils.arrayFilter(self.todos(), function(todo) {
                 return todo.done();
             }).length;
         });
 
         //count of todos that are not complete
-        this.remainingCount = ko.computed(function () {
+        self.remainingCount = ko.computed(function () {
             return self.todos().length - self.completedCount();
         });
 
+        //writeable computed observable to handle marking all complete/incomplete
+        self.allCompleted = ko.computed({
+            //always return true/false based on the done flag of all todos
+            read: function() {
+                return !self.remainingCount();
+            },
+            //set all todos to the written value (true/false)
+            write: function(newValue) {
+                ko.utils.arrayForEach(self.todos(), function(todo) {
+                    //set even if value is the same, as subscribers are not notified in that case
+                    todo.done(newValue);
+                });
+            }
+        });
+
         //helper function to keep expressions out of markup
-        this.getLabel = function(count) {
+        self.getLabel = function(count) {
             return ko.utils.unwrapObservable(count) === 1 ? "item" : "items";
         };
 
-        //computed observable that fires whenever anything changes in our todos
-        this.isDirty = ko.computed(function() {
+        //internal computed observable that fires whenever anything changes in our todos
+        ko.computed(function() {
             //get a clean copy of the todos, which also creates a dependency on the observableArray and all observables in each item
             var todos = ko.toJS(self.todos);
 

From 78ed736ae269d13fbd02349be6ab3c57877c5dd0 Mon Sep 17 00:00:00 2001
From: Ryan Niemeyer <rniemeyer@gmail.com>
Date: Thu, 5 Jan 2012 00:31:27 -0600
Subject: [PATCH 2/2] Add the "Press Enter" tooltip that appears after a delay
 when the user has entered a value and stops typing

---
 todo-example/knockoutjs/index.html  |  2 +-
 todo-example/knockoutjs/js/todos.js | 20 ++++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/todo-example/knockoutjs/index.html b/todo-example/knockoutjs/index.html
index 032becce78..7dc1da6c32 100644
--- a/todo-example/knockoutjs/index.html
+++ b/todo-example/knockoutjs/index.html
@@ -12,7 +12,7 @@ <h1>Todos</h1>
         <div class="content">
             <div id="create-todo">
                 <input id="new-todo" data-bind="value: current, valueUpdate: 'afterkeydown', enterKey: add" placeholder="What needs to be done?" />
-                <span class="ui-tooltip-top" style="display: none;">Press Enter to save this task</span>
+                <span class="ui-tooltip-top" data-bind="visible: showTooltip" style="display: none;">Press Enter to save this task</span>
             </div>
             <div id="todos">
                 <div data-bind="visible: todos().length">
diff --git a/todo-example/knockoutjs/js/todos.js b/todo-example/knockoutjs/js/todos.js
index eeb2802424..8f4bad92f3 100644
--- a/todo-example/knockoutjs/js/todos.js
+++ b/todo-example/knockoutjs/js/todos.js
@@ -93,6 +93,26 @@
             }
         });
 
+        //track whether the tooltip should be shown
+        self.showTooltip = ko.observable(false);
+        self.showTooltip.setTrue = function() { self.showTooltip(true); }; //avoid an anonymous function each time
+
+        //watch the current value
+        self.current.subscribe(function(newValue) {
+            //if the value was just updated, then the tooltip should not be shown
+            self.showTooltip(false);
+
+            //clear the current timer, as it is actively being updated
+            if (self.showTooltip.timer) {
+                clearTimeout(self.showTooltip.timer);
+            }
+
+            //if there is a value and then show the tooltip after 1 second
+            if (newValue) {
+                self.showTooltip.timer = setTimeout(self.showTooltip.setTrue, 1000);
+            }
+        });
+
         //helper function to keep expressions out of markup
         self.getLabel = function(count) {
             return ko.utils.unwrapObservable(count) === 1 ? "item" : "items";