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 } ) =>{ -