diff --git a/examples/todomvc/js/main.jsx b/examples/todomvc/js/main.jsx
index 4e53bd7..96f3760 100644
--- a/examples/todomvc/js/main.jsx
+++ b/examples/todomvc/js/main.jsx
@@ -1,40 +1,47 @@
import 'css/app.css'
import React from 'nestedreact'
import ReactDOM from 'react-dom'
-import { ToDo, LocalStorage } from './model.js'
+import {ToDo} from './model.js'
import TodoList from './todolist.jsx'
import Filter from './filter.jsx'
import AddTodo from './addtodo.jsx'
const App = React.createClass( {
- Model : LocalStorage,
-
+ // Declare component state
state : {
- id : 'todo-mvc',
todos : ToDo.Collection,
- filterDone : Boolean.value( null )
+ filterDone : Boolean.value( null ) // null | true | false, initialized with null.
},
componentWillMount(){
- this.state.fetch();
- window.onunload = () => this.state.save();
+ const { state } = this,
+ // load raw JSON from local storage
+ json = JSON.parse( localStorage.getItem( 'todo-mvc' ) || "{}" );
+
+ // initialize state with raw JSON
+ state.set( json, { parse : true } );
+
+ window.onunload = () =>{
+ // Save state back to the local storage
+ localStorage.setItem( 'todo-mvc', JSON.stringify( state ) );
+ }
},
render(){
- const { state } = this,
- hasTodos = Boolean( state.todos.length );
+ const { todos, filterDone } = this.state,
+ hasTodos = Boolean( todos.length );
return (
- state.todos.add({ desc : desc }) }/>
+ todos.add({ desc : desc }) }/>
- { hasTodos && }
+ { hasTodos && }
- { hasTodos && state.todos.clearCompleted() }
+ { hasTodos && todos.clearCompleted() }
/>}
diff --git a/examples/todomvc/js/model.js b/examples/todomvc/js/model.js
index 6860e03..1e7e094 100644
--- a/examples/todomvc/js/model.js
+++ b/examples/todomvc/js/model.js
@@ -34,22 +34,3 @@ export const ToDo = Model.extend({
}
}
});
-
-export const LocalStorage = Model.extend({
- fetch(){
- if( this.id ){
- const json = localStorage.getItem( this.id );
- json && ( this.set( JSON.parse( json ), { parse: true }) );
- }
- },
-
- save( attrs ){
- if( attrs ){
- this.set( attrs );
- }
-
- if( this.id ){
- localStorage.setItem( this.id, JSON.stringify( this ) );
- }
- }
-});
diff --git a/examples/todomvc/js/todolist.jsx b/examples/todomvc/js/todolist.jsx
index 6bc6dd4..495a4e3 100644
--- a/examples/todomvc/js/todolist.jsx
+++ b/examples/todomvc/js/todolist.jsx
@@ -18,8 +18,7 @@ const TodoList = React.createClass( {
render(){
const { todos, filterDone } = this.props,
- filtered = filterDone === null ?
- todos.models
+ filtered = filterDone === null ? todos.models
: todos.filter( todo => todo.done === filterDone ),
editingLink = this.state.getLink( 'editing' );
@@ -62,7 +61,7 @@ const TodoItem = ( { todo, editingLink } ) =>{
-