change todomvc example to use computed property based implementation

examples/todomvc/index.html

@@ -28,8 +28,7 @@
                 <ul id="todo-list">
                     <li
                         class="todo"
-                        v-repeat="todos"
-                        v-if="filterTodo(this)"
+                        v-repeat="filteredTodos"
                         v-class="
                             completed : completed,
                             editing   : this == editedTodo

examples/todomvc/js/app.js

@@ -4,6 +4,18 @@
 
     'use strict';
 
+    var filters = {
+        all: function (todo) {
+            return true;
+        },
+        active: function (todo) {
+            return !todo.completed;
+        },
+        completed: function (todo) {
+            return todo.completed;
+        }
+    };
+
     exports.app = new Vue({
 
         // the root element that will be compiled
@@ -13,7 +25,8 @@
         data: {
             todos: todoStorage.fetch(),
             newTodo: '',
-            editedTodo: null
+            editedTodo: null,
+            filter: 'all'
         },
 
         // a custom directive to wait for the DOM to be updated
@@ -31,35 +44,14 @@
             }
         },
 
-        // the `created` lifecycle hook.
-        // this is where we do the initialization work.
-        // http://vuejs.org/api/instantiation-options.html#created
-        created: function () {
-            // setup filters
-            this.filters = {
-                all: function (todo) {
-                    // collect dependency.
-                    // http://vuejs.org/guide/computed.html#Dependency_Collection_Gotcha
-                    /* jshint expr:true */
-                    todo.completed;
-                    return true;
-                },
-                active: function (todo) {
-                    return !todo.completed;
-                },
-                completed: function (todo) {
-                    return todo.completed;
-                }
-            };
-            // default filter
-            this.setFilter('all');
-        },
-
         // computed property
         // http://vuejs.org/guide/computed.html
         computed: {
+            filteredTodos: function () {
+                return this.todos.filter(filters[this.filter]);
+            },
             remaining: function () {
-                return this.todos.filter(this.filters.active).length
+                return this.todos.filter(filters.active).length
             },
             allDone: {
                 $get: function () {
@@ -78,11 +70,6 @@
         // note there's no DOM manipulation here at all.
         methods: {
 
-            setFilter: function (filter) {
-                this.filter = filter;
-                this.filterTodo = this.filters[filter];
-            },
-
             addTodo: function () {
                 var value = this.newTodo && this.newTodo.trim();
                 if (!value) {
@@ -133,4 +120,6 @@
         }
     });
 
+    app.filters = filters;
+
 })(window);

examples/todomvc/js/routes.js

@@ -2,16 +2,16 @@
 
 (function (app, Router) {
 
-    'use strict'
+    'use strict';
 
-    var router = new Router()
+    var router = new Router();
 
     Object.keys(app.filters).forEach(function (filter) {
         router.on(filter, function () {
-            app.setFilter(filter)
-        })
-    })
+            app.filter = filter;
+        });
+    });
 
-    router.init()
+    router.init();
     
-})(app, Router)
+})(app, Router);

examples/todomvc/js/store.js

@@ -2,21 +2,21 @@
 
 (function (exports) {
 
-    'use strict'
+    'use strict';
 
-    var STORAGE_KEY = 'todos-vuejs'
-    var todos = null
+    var STORAGE_KEY = 'todos-vuejs';
+    var todos = null;
 
     exports.todoStorage = {
         fetch: function () {
             if (!todos) {
-                todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
+                todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
             }
-            return todos
+            return todos;
         },
         save: function () {
-            localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
         }
-    }
+    };
 
-})(window)
+})(window);

test/functional/specs/todomvc.js

@@ -129,6 +129,8 @@ casper.test.begin('todomvc', 69, function (test) {
     .then(function () {
         createNewItem('test')
         createNewItem('test')
+    })
+    .then(function () {
         this.click('.todo:nth-child(2) .toggle')
         this.click('.todo:nth-child(3) .toggle')
     })