fix todos example

examples/todomvc/index.html

@@ -18,7 +18,7 @@
                     sd-on="keyup:addTodo | key enter"
                 >
             </header>
-            <section id="main" sd-show="total">
+            <section id="main" sd-show="todos.length">
                 <input 
                     id="toggle-all"
                     type="checkbox"
@@ -51,7 +51,7 @@
                     </li>
                 </ul>
             </section>
-            <footer id="footer" sd-show="total">
+            <footer id="footer" sd-show="todos.length">
                 <span id="todo-count">
                     <strong sd-text="remaining"></strong> {{remaining | pluralize item}} left
                 </span>

examples/todomvc/js/app.js

@@ -1,21 +1,13 @@
-seed.config({ debug: true })
-
 var filters = {
     all: function () { return true },
     active: function (todo) { return !todo.completed },
     completed: function (todo) { return todo.completed }
 }
 
-var todos = [
-            {title: 'hi', completed: true},
-            {title: 'ha', completed: false},
-            {title: 'ho', completed: false},
-        ]
-
 var Todos = seed.ViewModel.extend({
 
     init: function () {
-        this.todos = todos//todoStorage.fetch()
+        this.todos = todoStorage.fetch()
         this.remaining = this.todos.filter(filters.active).length
         this.updateFilter()
     },
@@ -28,12 +20,8 @@ var Todos = seed.ViewModel.extend({
         },
 
         // computed properties ----------------------------------------------------
-        total: {get: function () {
-            return this.todos.length
-        }},
-
         completed: {get: function () {
-            return this.total - this.remaining
+            return this.todos.length - this.remaining
         }},
 
         // dynamic context computed property using info from target viewmodel
@@ -55,8 +43,8 @@ var Todos = seed.ViewModel.extend({
                 this.todos.forEach(function (todo) {
                     todo.completed = value
                 })
-                this.remaining = value ? 0 : this.total
-                todoStorage.save(this.todos)
+                this.remaining = value ? 0 : this.todos.length
+                todoStorage.save()
             }
         },
 
@@ -67,19 +55,19 @@ var Todos = seed.ViewModel.extend({
                 this.todos.unshift({ title: value, completed: false })
                 this.newTodo = ''
                 this.remaining++
-                todoStorage.save(this.todos)
+                todoStorage.save()
             }
         },
 
         removeTodo: function (e) {
             this.todos.remove(e.item)
             this.remaining -= e.item.completed ? 0 : 1
-            todoStorage.save(this.todos)
+            todoStorage.save()
         },
 
         toggleTodo: function (e) {
             this.remaining += e.item.completed ? -1 : 1
-            todoStorage.save(this.todos)
+            todoStorage.save()
         },
 
         editTodo: function (e) {
@@ -92,7 +80,7 @@ var Todos = seed.ViewModel.extend({
             e.item.editing = false
             e.item.title = e.item.title.trim()
             if (!e.item.title) this.removeTodo(e)
-            todoStorage.save(this.todos)
+            todoStorage.save()
         },
 
         cancelEdit: function (e) {
@@ -102,13 +90,12 @@ var Todos = seed.ViewModel.extend({
 
         removeCompleted: function () {
             this.todos = this.todos.filter(filters.active)
-            todoStorage.save(this.todos)
+            todoStorage.save()
         }
     }
 })
 
 var app = new Todos({ el: '#todoapp' })
-
 window.addEventListener('hashchange', function () {
     app.updateFilter()
 })

examples/todomvc/js/todoStorage.js

@@ -1,10 +1,12 @@
 var todoStorage = (function () {
-    var STORAGE_KEY = 'todos-seedjs'
+    var STORAGE_KEY = 'todos-seedjs',
+        todos = null
     return {
         fetch: function () {
-            return JSON.parse(localStorage.getItem(this.STORAGE_KEY) || '[]')
+            if (!todos) todos = JSON.parse(localStorage.getItem(this.STORAGE_KEY) || '[]')
+            return todos
         },
-        save: function (todos) {
+        save: function () {
             localStorage.setItem(this.STORAGE_KEY, JSON.stringify(todos))
         }
     }

src/compiler.js

@@ -376,6 +376,7 @@ CompilerProto.define = function (key, binding) {
         binding.isComputed = true
         binding.rawGet = value.get
         value.get = value.get.bind(vm)
+        if (value.set) value.set = value.set.bind(vm)
         this.computed.push(binding)
     } else if (type === 'Object' || type === 'Array') {
         // observe objects later, becase there might be more keys