update todomvc example

Author: Evan You

examples/todomvc/index.html

@@ -39,7 +39,6 @@ <h1>todos</h1>
                                 class="toggle"
                                 type="checkbox"
                                 v-model="completed"
-                                v-on="change: toggleTodo(this)"
                             >
                             <label v-text="title" v-on="dblclick: editTodo(this)"></label>
                             <button class="destroy" v-on="click: removeTodo(this)"></button>

examples/todomvc/js/app.js

@@ -29,6 +29,13 @@
             filter: 'all'
         },
 
+        // ready hook, watch todos change for data persistence
+        ready: function () {
+            this.$watch('todos', function (todos) {
+                todoStorage.save(todos);
+            });
+        },
+
         // a custom directive to wait for the DOM to be updated
         // before focusing on the input field.
         // http://vuejs.org/guide/directives.html#Writing_a_Custom_Directive
@@ -64,7 +71,6 @@
                     this.todos.forEach(function (todo) {
                         todo.completed = value;
                     });
-                    todoStorage.save();
                 }
             }
         },
@@ -80,16 +86,10 @@
                 }
                 this.todos.push({ title: value, completed: false });
                 this.newTodo = '';
-                todoStorage.save();
             },
 
             removeTodo: function (todo) {
                 this.todos.$remove(todo.$data);
-                todoStorage.save();
-            },
-
-            toggleTodo: function (todo) {
-                todoStorage.save();
             },
 
             editTodo: function (todo) {
@@ -106,7 +106,6 @@
                 if (!todo.title) {
                     this.removeTodo(todo);
                 }
-                todoStorage.save();
             },
 
             cancelEdit: function (todo) {
@@ -116,7 +115,6 @@
 
             removeCompleted: function () {
                 this.todos = this.todos.filter(filters.active);
-                todoStorage.save();
             }
         }
     });

examples/todomvc/js/store.js

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