Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/develop'
Browse files Browse the repository at this point in the history
# Conflicts:
#	README.md
#	examples/todomvc/app.js
#	examples/todomvc/app.js.map
#	nestedreact.js
#	nestedreact.js.map
#	package.json
  • Loading branch information
Vlad Balin committed Jul 23, 2016
2 parents bc53afe + ee80c4c commit fba438e
Show file tree
Hide file tree
Showing 17 changed files with 43,155 additions and 126 deletions.
37 changes: 22 additions & 15 deletions examples/todomvc/js/main.jsx
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<section className="todoapp">
<AddTodo onEnter={ desc => state.todos.add({ desc : desc }) }/>
<AddTodo onEnter={ desc => todos.add({ desc : desc }) }/>

{ hasTodos && <TodoList todos={ state.todos }
filterDone={ state.filterDone }/> }
{ hasTodos && <TodoList todos={ todos }
filterDone={ filterDone }/> }

{ hasTodos && <Filter count={ state.todos.activeCount }
filterLink={ state.getLink( 'filterDone' )}
onClear={ () => state.todos.clearCompleted() }
{ hasTodos && <Filter count={ todos.activeCount }
filterLink={ this.state.getLink( 'filterDone' ) }
onClear={ () => todos.clearCompleted() }
/>}
</section>

Expand Down
19 changes: 0 additions & 19 deletions examples/todomvc/js/model.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) );
}
}
});
7 changes: 3 additions & 4 deletions examples/todomvc/js/todolist.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down Expand Up @@ -62,7 +61,7 @@ const TodoItem = ( { todo, editingLink } ) =>{
<Input className="toggle" type="checkbox"
checkedLink={ todo.getLink( 'done' ) }/>

<label onDoubleClick={ () => editingLink.set( todo ) }>
<label onDoubleClick={ editingLink.action( () => todo ) }>
{ todo.desc }
</label>

Expand All @@ -72,7 +71,7 @@ const TodoItem = ( { todo, editingLink } ) =>{
{ editing && <Input className="edit"
valueLink={ todo.getLink( 'desc' ) }
autoFocus={ true }
onBlur={ () => editingLink.set( null ) }
onBlur={ editingLink.action( () => null ) }
onKeyDown={ editingLink.action( clearOnEnter ) }/> }
</li>
);
Expand Down
6 changes: 3 additions & 3 deletions examples/todomvc/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
"classnames": "^2.2.0",
"css-loader": "^0.23.0",
"jquery": "^2.1.4",
"nestedreact": "^0.6.0-rc0",
"nestedreact": "^1.0.0-rc0",
"nestedtypes": "^1.3.2-rc0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-router": "^1.0.0",
"style-loader": "^0.13.0",
"underscore": "^1.8.3",
Expand Down
15 changes: 15 additions & 0 deletions examples/userslist/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# UsersList Example

Here's the UsersList application example, written originally for NestedLink.

It's changed to use NestedReact. Feel the difference.

NestedLink data binding is so powerful that there are no any difference
in size, so expressiveness is roughly the same.

But. Check out how much less magical NestedReact solution feels - compare the code.

In fact, there's an incredible amount of dirty magic involved,
just to make you feel that there are no any magic at all :).

That's NestedReact. Relax, and write in natural way, no tricks are required.
Loading

0 comments on commit fba438e

Please sign in to comment.