using the url routing logic to control the tasks filter.

passy · Aug 9, 2013 · 6d8af2c · 6d8af2c
1 parent 29c6dcf
commit 6d8af2c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 16 deletions.
diff --git a/labs/dependency-examples/durandal/js/main.js b/labs/dependency-examples/durandal/js/main.js
@@ -72,7 +72,7 @@ define(['bower_components/durandal/app',
 			//configure routing
 			router.useConvention('js/viewmodels');
 			router.mapNav('todoapp');
-			// router.mapNav('flickr');
+			router.mapNav('#/:filter', 'js/viewmodels/todoapp');
 
 			app.adaptToDevice();
 

diff --git a/labs/dependency-examples/durandal/js/viewmodels/list.js b/labs/dependency-examples/durandal/js/viewmodels/list.js
@@ -1,7 +1,8 @@
 /*global define, ko */
 define([
-	'bower_components/durandal/app'
-], function (app) {
+	'bower_components/durandal/app',
+	'js/viewmodels/shell'
+], function (app, shell) {
 
 	'use strict';
 	// represent a single todo item
@@ -16,6 +17,9 @@ define([
 		var self = this;
 
 		self.activate = function () {
+			//initialize the show mode 
+			self.showMode(shell.filter);
+
 			// // check local storage for todos
 			var todosFromlocalStorage = ko.utils.parseJson(localStorage.getItem('todos-durandal'));
 

diff --git a/labs/dependency-examples/durandal/js/viewmodels/shell.js b/labs/dependency-examples/durandal/js/viewmodels/shell.js
@@ -1,18 +1,13 @@
 /*global define*/
 define([
 	'bower_components/durandal/plugins/router',
-	'bower_components/durandal/app'
-], function (router, app) {
+], function (router) {
 
 	'use strict';
 
 	return {
 		router: router,
-		search: function () {
-			//It's really easy to show a message box.
-			//You can add custom options too. Also, it returns a promise for the user's response.
-			app.showMessage('Search not yet implemented...');
-		},
+		filter: '', // this is used as the global cache to figure out the filter in effect.
 		activate: function () {
 			return router.activate('todoapp');
 		}

diff --git a/labs/dependency-examples/durandal/js/viewmodels/todoapp.js b/labs/dependency-examples/durandal/js/viewmodels/todoapp.js
@@ -1,7 +1,16 @@
-define(function () {
+/*global define */
+define([
+	'js/viewmodels/shell'
+], function (shell) {
 	'use strict';
 
 	var ViewModel = function () {
+		var self = this;
+
+		self.activate = function (context) {
+			shell.filter = context.filter;
+			return true;
+		};
 	};
 
 	return ViewModel;

diff --git a/labs/dependency-examples/durandal/js/views/list.html b/labs/dependency-examples/durandal/js/views/list.html
@@ -21,13 +21,13 @@
 		</span>
 		<ul id="filters">
 				<li>
-				<a data-bind="css: { selected: showMode() == 'all' }, click: function() {  showMode('all');}" href="#" >All</a>
+				<a data-bind="css: { selected: showMode() == 'all' }" href="#/all" >All</a>
 				</li>
 				<li>
-						<a data-bind="css: { selected: showMode() == 'active' }, click: function() {  showMode('active');}" href="#">Active</a>
+						<a data-bind="css: { selected: showMode() == 'active' }" href="#/active">Active</a>
 				</li>
 				<li>
-						<a data-bind="css: { selected: showMode() == 'completed' },click: function() {  showMode('completed');}" href="#">Completed</a>
+						<a data-bind="css: { selected: showMode() == 'completed' }" href="#/completed">Completed</a>
 				</li>
 		</ul>
 		<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">

diff --git a/labs/dependency-examples/durandal/js/views/todoapp.html b/labs/dependency-examples/durandal/js/views/todoapp.html
@@ -1,10 +1,10 @@
 <section id="todoapp">
 		<!--ko compose: { 
-			model: 'js/viewmodels/entry', activate: true//wiring the router
+			model: 'js/viewmodels/entry', activate: true
 		}--><!--/ko-->
 		<div>
 			<!--ko compose: { 
-				model: 'js/viewmodels/list', activate: true //wiring the router
+				model: 'js/viewmodels/list', activate: true
 			}--><!--/ko-->
 		</div>