Update knockoutjs_require to add mode-based filtering.

examples/knockoutjs_require/.gitignore

@@ -1,5 +1,3 @@
-node_modules/*
-
 node_modules/knockout/**
 !node_modules/knockout/build/output/knockout-latest.js
 
@@ -12,3 +10,8 @@ node_modules/todomvc-app-css/*
 node_modules/todomvc-common/*
 !node_modules/todomvc-common/base.css
 !node_modules/todomvc-common/base.js
+
+node_modules/director/*
+node_modules/director/build/*
+!node_modules/director/build
+!node_modules/director/build/director.js

examples/knockoutjs_require/index.html

@@ -15,7 +15,7 @@ <h1>todos</h1>
 			<section id="main" data-bind="visible: todos().length">
 				<input id="toggle-all" data-bind="checked: allCompleted" type="checkbox">
 				<label for="toggle-all">Mark all as complete</label>
-				<ul id="todo-list" data-bind="foreach: todos">
+				<ul id="todo-list" data-bind="foreach: filteredTodos">
 					<li data-bind="css: { completed: completed, editing: editing }">
 						<div class="view">
 							<input class="toggle" data-bind="checked: completed" type="checkbox">
@@ -31,6 +31,17 @@ <h1>todos</h1>
 					<strong data-bind="text: remainingCount">0</strong>
 					<span data-bind="text: getLabel(remainingCount)"></span> left
 				</span>
+				<ul id="filters">
+					<li>
+						<a data-bind="css: { selected: showMode() == 'all' }" href="#/all">All</a>
+					</li>
+					<li>
+						<a data-bind="css: { selected: showMode() == 'active' }" href="#/active">Active</a>
+					</li>
+					<li>
+						<a data-bind="css: { selected: showMode() == 'completed' }" href="#/completed">Completed</a>
+					</li>
+				</ul>
 				<button id="clear-completed" data-bind="visible: completedCount, click: removeCompleted">Clear completed</button>
 			</footer>
 		</section>

examples/knockoutjs_require/js/main.js

@@ -5,15 +5,17 @@
 // Require.js allows us to configure shortcut alias
 require.config({
 	paths: {
-		knockout: '../node_modules/knockout/build/output/knockout-latest'
+		knockout: '../node_modules/knockout/build/output/knockout-latest',
+		director: '../node_modules/director/build/director'
 	}
 });
 
 require([
 	'knockout',
 	'config/global',
 	'viewmodels/todo',
-	'extends/handlers'
+	'extends/handlers',
+	'director'
 ], function (ko, g, TodoViewModel) {
 	'use strict';
 
@@ -22,5 +24,10 @@ require([
 	var todos = ko.utils.parseJson(window.localStorage.getItem(g.localStorageItem));
 
 	// bind a new instance of our view model to the page
-	ko.applyBindings(new TodoViewModel(todos || []));
+	var viewModel = new TodoViewModel(todos || []);
+	ko.applyBindings(viewModel);
+
+	// set up filter routing
+	/*jshint newcap:false */
+	Router({ '/:filter': viewModel.showMode }).init();
 });

examples/knockoutjs_require/js/viewmodels/todo.js

@@ -19,6 +19,9 @@ define([
 		// store the new todo value being entered
 		self.current = ko.observable();
 
+		// store the current mode, default is all
+		self.showMode = ko.observable('all');
+
 		// add a new todo, when enter key is pressed
 		self.add = function () {
 			var current = self.current().trim();
@@ -71,7 +74,23 @@ define([
 			item.editing(false);
 			item.title(item.previousTitle);
 		};
-
+
+		// filter todos based on the mode selected
+		self.filteredTodos = ko.computed(function () {
+			switch (self.showMode()) {
+			case 'active':
+				return self.todos().filter(function (todo) {
+					return !todo.completed();
+				});
+			case 'completed':
+				return self.todos().filter(function (todo) {
+					return todo.completed();
+				});
+			default:
+				return self.todos();
+			}
+		});
+
 		// count of all completed todos
 		self.completedCount = ko.computed(function () {
 			return ko.utils.arrayFilter(self.todos(), function (todo) {