From 55b531bdebe2115117821b93279462aa3e7fe647 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 27 May 2016 15:49:16 -0700
Subject: [PATCH] [API] Sketch in view instantiation

---
 tutorials/todo/todo-task.html |  2 +-
 tutorials/todo/todo.js        | 73 ++++++++++++++++++++++++++++-------
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/tutorials/todo/todo-task.html b/tutorials/todo/todo-task.html
index 3d278a4625..ff1e8ea529 100644
--- a/tutorials/todo/todo-task.html
+++ b/tutorials/todo/todo-task.html
@@ -1,5 +1,5 @@
 <li>
-    <input type="checkbox">
+    <input type="checkbox" class="example-task-checked">
     <span class="example-task-description">
     </span>
 </li>
diff --git a/tutorials/todo/todo.js b/tutorials/todo/todo.js
index 4702c4ab33..18e46653f3 100644
--- a/tutorials/todo/todo.js
+++ b/tutorials/todo/todo.js
@@ -20,24 +20,67 @@ define([
         });
 
         todoType.view(mct.regions.main, function (domainObject) {
-            var view = new mct.View();
+            var view = new mct.View({
+                state: function () {
+                    return {
+                        filter: "all"
+                    };
+                },
+                elements: $.bind(null, todoTemplate),
+                initialize: function (elements, render) {
+                    var $els = $(elements);
+                    var $buttons = {
+                        all: $els.find('.example-todo-button-all'),
+                        incomplete: $els.find('.example-todo-button-incomplete'),
+                        complete: $els.find('.example-todo-button-complete')
+                    };
+                    Object.keys($buttons).forEach(function (k) {
+                        $buttons[k].on('click', function () {
+                            state.filter = k;
+                            render();
+                        });
+                    });
+                },
+                render: function (elements, domainObject, state) {
+                    var $els = $(elements);
+                    var tasks = domainObject.getModel().tasks;
+                    var $message = $els.find('.example-message');
+                    var $list = $els.find('example-todo-task-list');
+                    var $buttons = {
+                        all: $els.find('.example-todo-button-all'),
+                        incomplete: $els.find('.example-todo-button-incomplete'),
+                        complete: $els.find('.example-todo-button-complete')
+                    };
+                    var filters = {
+                        all: function (task) {
+                            return true;
+                        },
+                        incomplete: function (task) {
+                            return !task.completed;
+                        },
+                        complete: function (task) {
+                            return task.completed;
+                        }
+                    };
 
-            function render() {
-                var domainObject = view.model();
-                var $els = $(view.elements());
-                var tasks = domainObject.getModel().tasks;
-                var $message = $els.find('.example-message');
-                var $buttons = {
-                    all: $els.find('.example-todo-button-all'),
-                    incomplete: $els.find('.example-todo-button-incomplete'),
-                    complete: $els.find('.example-todo-button-complete')
-                };
+                    Object.keys($buttons).forEach(function (k) {
+                        $buttons[k].toggleClass('selected', state.filter === k);
+                    });
 
-                $message.toggle(tasks.length < 1);
-            }
+                    tasks = tasks.filter(filters[state.filter]);
 
-            view.elements($(todoTemplate));
-            view.on('model', render);
+                    $list.empty();
+                    tasks.forEach(function (task) {
+                        var $taskEls = $(taskTemplate);
+                        $taskEls.find('.example-task-checked')
+                            .prop('checked', task.completed);
+                        $taskEls.find('.example-task-description')
+                            .text(task.description);
+                    });
+
+                    $message.toggle(tasks.length < 1);
+                }
+            });
             view.model(domainObject);
             return view;
         });