Created
March 1, 2015 18:18
-
-
Save maji-KY/e7a085f7d05a5f281f04 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>react</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
<script src="http://fb.me/react-with-addons-0.12.2.js"></script> | |
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.js"></script> | |
<script src="https://github.com/react-bootstrap/react-bootstrap/releases/download/v0.13.0/react-bootstrap.min.js"></script> | |
<script src="js/ReactRouterBootstrap.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.50/Bacon.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/0.15.7/superagent.min.js"></script> | |
<script src="https://github.com/BinaryMuse/fluxxor/releases/download/1.5.2/fluxxor.js"></script> | |
<!--<script type="text/jsx" src="app.js"></script>--> | |
</head> | |
<body> | |
<div id="appContainer"></div> | |
<!--<script type="text/jsx;harmony=true">--> | |
<script type="text/jsx"> | |
var ButtonLink = ReactRouterBootstrap.ButtonLink; | |
var FluxMixin = Fluxxor.FluxMixin(React); | |
var StoreWatchMixin = Fluxxor.StoreWatchMixin; | |
var ActionTypes = { | |
CHANGE_TODO_LIST: "CHANGE_TODO_LIST", | |
DONE_TODO: "DONE_TODO" | |
}; | |
var TodoStore = Fluxxor.createStore({ | |
initialize: function() { | |
this.todos = [{ | |
id: 'Buy some milk', | |
name: 'Buy some milk', | |
done: false | |
}]; | |
console.log("koko"); | |
console.log(this); | |
this.bindActions( | |
ActionTypes.CHANGE_TODO_LIST, this.onAddTodo, | |
ActionTypes.DONE_TODO, this.onDoneTodo | |
); | |
}, | |
onAddTodo: function(payload) { | |
this.todos.push({id: payload.text, name: payload.text, complete: false}); | |
this.emit("change"); | |
}, | |
onDoneTodo: function(payload) { | |
console.log("onDoneTodo"); | |
console.log(this.todos); | |
payload.todo.done = true; | |
this.emit("change"); | |
}, | |
getState: function() { | |
return { | |
todos: this.todos | |
}; | |
} | |
}); | |
var Todo = React.createClass({ | |
mixins: [FluxMixin], | |
onClick: function(e) { | |
e.preventDefault(); | |
this.getFlux().actions.doneTodo(this.props.todo); | |
}, | |
render: function() { | |
var todo = this.props.todo; | |
console.log(todo.name); | |
var button = (todo.done) ? "": <button onClick={this.onClick}>Done</button>; | |
return (<li>{todo.name} {button}</li>); | |
} | |
}); | |
var TodoList = React.createClass({ | |
mixins: [StoreWatchMixin("TodoStore"), FluxMixin], | |
getStateFromFlux: function() { | |
var flux = this.getFlux(); | |
console.log(this); | |
return flux.store("TodoStore").getState(); | |
}, | |
render: function() { | |
var rows = this.state.todos.filter(function(todo) { | |
return !todo.done; | |
}).map(function(todo) { | |
return (<Todo key={todo.id} todo={todo}></Todo>); | |
}); | |
return ( | |
<div className="active-todos"> | |
<h2>Active</h2> | |
<ul>{rows}</ul> | |
</div> | |
); | |
} | |
}); | |
var TodoForm = React.createClass({ | |
componentWillMount: function() { | |
console.log(this); | |
}, | |
mixins: [React.addons.LinkedStateMixin, FluxMixin], | |
getInitialState: function() { | |
return {content: ''}; | |
}, | |
handleSubmit: function(e) { | |
e.preventDefault(); | |
var name = this.state.content.trim(); | |
if(name) { | |
// alert(name); | |
// this.props.onSubmitTodo(name);// to dispatch event | |
this.getFlux().actions.addTodo(name); | |
this.setState({ content: ""}); | |
} | |
}, | |
render: function() { | |
var valueLink = this.linkState('content'); | |
var handleChange = function(e) { | |
valueLink.requestChange(e.target.value); | |
}; | |
return ( | |
<form onSubmit={this.handleSubmit}> | |
<input ref="todoName" type="text" value={valueLink.value} onChange={handleChange}></input><input type="submit"></input> | |
</form> | |
); | |
} | |
}); | |
var TodoApp = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<h1>My Todo</h1> | |
<TodoList/> | |
<TodoForm/> | |
</div> | |
); | |
} | |
}); | |
var Users = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<h1>Users</h1> | |
<ButtonLink to="/user/1">1</ButtonLink> | |
<ButtonLink to="/user/2">2</ButtonLink> | |
<ButtonLink to="/user/3">3</ButtonLink> | |
</div> | |
); | |
} | |
}); | |
var UsersView = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<RouteHandler /> | |
</div> | |
); | |
} | |
}); | |
var User = React.createClass({ | |
mixins: [ReactRouter.State], | |
render: function() { | |
return ( | |
<div> | |
<h1>User: {this.getParams().userId}</h1> | |
<ButtonLink to="list">back</ButtonLink> | |
</div> | |
); | |
} | |
}); | |
var NotFound = React.createClass({ | |
render: function() { | |
return ( | |
<div> | |
<h1>ねーよ</h1> | |
</div> | |
); | |
} | |
}); | |
var App = React.createClass({ | |
mixins: [ FluxMixin ], | |
componentWillMount: function() { | |
console.log(this); | |
}, | |
render: function() { | |
var flux = this.getFlux(); | |
return ( | |
<div> | |
<h1>title</h1> | |
<ButtonLink to="/">todo</ButtonLink><br/> | |
<ButtonLink to="list">users</ButtonLink> | |
<RouteHandler flux={flux} /> | |
</div> | |
); | |
} | |
}); | |
var Router = ReactRouter; | |
var Route = ReactRouter.Route; | |
var Routes = ReactRouter.Routes; | |
var Redirect = ReactRouter.Redirect; | |
var RouteHandler = ReactRouter.RouteHandler; | |
var routes = ( | |
<Route handler={App} path="/"> | |
<ReactRouter.DefaultRoute handler={TodoApp} /> | |
<Route name="list" handler={Users} /> | |
<Route name="users" handler={UsersView}> | |
<Route name="user" path="/user/:userId" handler={User} /> | |
<ReactRouter.NotFoundRoute handler={NotFound}/> | |
</Route> | |
<ReactRouter.NotFoundRoute handler={NotFound}/> | |
<Redirect from="company" to="about" /> | |
</Route> | |
); | |
var stores = { | |
TodoStore : new TodoStore() | |
}; | |
var actions = { | |
addTodo: function(text) { | |
this.dispatch(ActionTypes.CHANGE_TODO_LIST, {text: text}); | |
}, | |
doneTodo: function(todo) { | |
this.dispatch(ActionTypes.DONE_TODO, {todo: todo}); | |
} | |
}; | |
var flux = new Fluxxor.Flux(stores, actions); | |
Router.run(routes, function (Handler) { | |
React.render(<Handler flux={flux} />, document.getElementById('appContainer')); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment