Final modifications to match new template.

architecture-examples/dojo/css/app.css

@@ -8,6 +8,10 @@
     display: inherit;
 }
 
+#todo-list li.hidden {
+    display: none;
+}
+
 #todo-list li .toggle.dijitChecked:after {
 	color: #85ada7;
 	text-shadow: 0 1px 0 #669991;

architecture-examples/dojo/index.html

@@ -19,6 +19,6 @@
 	</footer>
 	
 	<script src="../../assets/base.js"></script>
-	<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'/code/JavaScript/todomvc/architecture-examples/dojo/js/todo/'}, deps:['dojo/parser', 'todo/app']" src="/code/JavaScript/Libraries/DTK/dojo-release-1.7.2-src/dojo/dojo.js"></script>
+	<script data-dojo-config="async:true, parseOnLoad:true, locale:'en', paths:{'todo':'../todo/'}, deps:['dojo/parser', 'todo/app']" src="js/lib/dojo/dojo.js"></script>
 </body>
 </html>

architecture-examples/dojo/js/todo/app.html

@@ -6,7 +6,7 @@
     </header>
 
     <section id="main">
-	    <input id="toggle-all" type="checkbox">
+	    <input id="toggle-all" data-dojo-attach-point="mark_all" data-dojo-attach-event="onclick:onMarkAll" type="checkbox">
 	    <label for="toggle-all">Mark all as complete</label>
         <ul id="todo-list" data-dojo-attach-point="todo_list" data-dojo-type="dojox.mvc.Repeat" data-dojo-props="ref: this.model.todos, exprchar: '#'">
             <li data-dojo-type="dojox.mvc.Group" data-dojo-props="ref: '#{this.index}'">

architecture-examples/dojo/js/todo/app.js

@@ -6,18 +6,23 @@ define(["dojo/_base/declare",
         // Parent classes
         "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin",
         // General application modules
-        "dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", 
-        "dojo/keys", "dojox/mvc", "todo/model/TodoModel",
+        "dojo/_base/lang", "dojo/_base/event", "dojo/on", "dojo/dom-class", "dojo/dom-attr", "dojo/query",
+        "dojo/keys", "dojox/mvc", "dojo/hash", "dojo/_base/connect", "todo/model/TodoModel",
         // Widget template
         "dojo/text!./app.html",
         // Template Widgets
         "dijit/InlineEditBox", "todo/form/CheckBox", "dojox/mvc/Group", "dojox/mvc/Repeat", "dojox/mvc/Output"],
     function(declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, _event, on, domClass, domAttr, 
-             keys, mvc, TodoModel, template) {
+             query, keys, mvc, hash, connect, TodoModel, template) {
 
     return declare("todo.app", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
+        /** Widget template HTML string */
         templateString: template,
 
+        /** Hash state constants */
+        ACTIVE: "/active",
+        COMPLETED: "/completed",
+
         constructor: function () {
             /**
              * Create new application Model class, this will be used to bind
@@ -42,6 +47,9 @@ define(["dojo/_base/declare",
             window.onbeforeunload = lang.hitch(this, function () {
                 this.model.commit();
             });
+
+            /** Connect to changes to the URI hash */
+            connect.subscribe("/dojo/hashchange", this, "onHashChange");
         },
 
         /**
@@ -55,6 +63,15 @@ define(["dojo/_base/declare",
             this.onItemStatusUpdate();
         },
 
+        /** 
+         * Ensure application state reflects current 
+         * hash value after rendering model in the view.
+         */  
+        startup: function () {
+            this.inherited(arguments);
+            this.onHashChange(hash());
+        },
+
         /**
          * Remove all items that have been completed from
          * model. We have to individually check each todo
@@ -94,10 +111,29 @@ define(["dojo/_base/declare",
         /**
          * Adjust CSS classes on todo-stats element based upon whether
          * we a number of completed and incomplete todo items.
+         * Also verify state of the "Mark All" box.
          */
         onItemStatusUpdate: function () {
-            domClass.toggle(this.domNode, "todos_selected", this.model.complete.value > 0);
-            domClass.toggle(this.domNode, "todos_present", this.model.todos.get("length"));
+            var completed = this.model.complete.get("value"), 
+                length = this.model.todos.get("length");
+
+            domClass.toggle(this.domNode, "todos_selected", completed > 0);
+            domClass.toggle(this.domNode, "todos_present", length);
+
+            domAttr.set(this.mark_all, "checked", length && length === completed);
+        },
+
+        /**
+         * Event fired when user selects the "Mark All" checkbox.
+         * Update selection state of all the todos based upon current 
+         * checked value.
+         */ 
+        onMarkAll: function () {
+            var checked = this.mark_all.checked;
+
+            for(var i = 0, len = this.model.todos.length; i < len; i++) {
+                this.model.todos[i].isDone.set("value", checked);
+            }
         },
 
         /**
@@ -120,6 +156,29 @@ define(["dojo/_base/declare",
          **/
         onRemove: function (event) {
             this.model.todos.remove(domAttr.get(event.target, "data-model-id"));
+        }, 
+
+        /**
+         * When the URI's hash value changes, modify the 
+         * displayed list items to show either completed,
+         * remaining or all tasks. 
+         * Also highlight currently selected link value.
+         */ 
+        onHashChange: function (hash) {
+            var showIfDone = (hash === this.COMPLETED ? false : 
+                (hash === this.ACTIVE? true : null));
+           
+            query("#todo-list > li").forEach(lang.hitch(this, function (item, idx) {
+                var done = this.model.todos[idx].isDone.get("value");
+                domClass.toggle(item, "hidden", done === showIfDone);
+            }));
+
+            /** Normalise hash value to match link hrefs */
+            hash = "#" + (showIfDone !== null ? hash : "/");
+
+            query("#filters a").forEach(lang.hitch(this, function (link) {
+                domClass.toggle(link, "selected", domAttr.get(link, "href") === hash);
+            }));
         }
     });
 });

architecture-examples/dojo/js/todo/model/TodoModel.js

@@ -7,7 +7,7 @@ define(["dojo/_base/declare", "dojox/mvc/StatefulModel", "todo/store/LocalStorag
          * items found in localStorage.
          */
         data: {
-            id: "local_storage_todos",
+            id: "todos_dojo",
             todos : [],
             incomplete: 0,
             complete: 0