Skip to content

T
todomvc
Commit 28bdc919 authored by Cheng Lou's avatar Cheng Lou
Browse files
Options

add changes form review

parent d80d1432
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 58 deletions
labs/architecture-examples/react-backbone/index.html
View file @ 28bdc919
...@@ -3,13 +3,16 @@ ...@@ -3,13 +3,16 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>React • TodoMVC</title> <title>React + Backbone • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css"> <link rel="stylesheet" href="bower_components/todomvc-common/base.css">
</head> </head>
<body> <body>
<section id="todoapp"></section> <section id="todoapp"></section>
<footer id="info"></footer> <footer id="info">
<div id="benchmark"></div> <p>Double-click to edit a todo</p>
<p>Created by <a href="http://github.com/petehunt/">petehunt</a></p>
<p>Part of<a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script> <script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/react/react-with-addons.js"></script> <script src="bower_components/react/react-with-addons.js"></script>
...@@ -21,6 +24,9 @@ ...@@ -21,6 +24,9 @@
<script src="js/todo.js"></script> <script src="js/todo.js"></script>
<script src="js/todos.js"></script> <script src="js/todos.js"></script>
<!-- jsx is an optional syntactic sugar that transforms methods in React's
`render` into an HTML-looking format. Since the two models above are
unrelated to React, we didn't need those transforms. -->
<script type="text/jsx" src="js/todoItem.jsx"></script> <script type="text/jsx" src="js/todoItem.jsx"></script>
<script type="text/jsx" src="js/footer.jsx"></script> <script type="text/jsx" src="js/footer.jsx"></script>
<script type="text/jsx" src="js/app.jsx"></script> <script type="text/jsx" src="js/app.jsx"></script>
......
labs/architecture-examples/react-backbone/js/app.jsx
View file @ 28bdc919
...@@ -5,15 +5,17 @@ ...@@ -5,15 +5,17 @@
/*jshint white:false */ /*jshint white:false */
/*jshint trailing:false */ /*jshint trailing:false */
/*jshint newcap:false */ /*jshint newcap:false */
/*global Utils, ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS, /*global React, Backbone */
TodoItem, TodoFooter, React, Router*/ var app = app || {};
(function (window, React) { (function () {
'use strict'; 'use strict';
window.ALL_TODOS = 'all'; app.ALL_TODOS = 'all';
window.ACTIVE_TODOS = 'active'; app.ACTIVE_TODOS = 'active';
window.COMPLETED_TODOS = 'completed'; app.COMPLETED_TODOS = 'completed';
var TodoFooter = app.TodoFooter;
var TodoItem = app.TodoItem;
var ENTER_KEY = 13; var ENTER_KEY = 13;
...@@ -29,7 +31,10 @@ ...@@ -29,7 +31,10 @@
componentDidMount: function () { componentDidMount: function () {
// Whenever there may be a change in the Backbone data, trigger a // Whenever there may be a change in the Backbone data, trigger a
// reconcile. // reconcile.
this.getBackboneCollections().forEach(function (collection, i) { this.getBackboneCollections().forEach(function (collection) {
// explicitly bind `null` to `forceUpdate`, as it demands a callback and
// React validates that it's a function. `collection` events passes
// additional arguments that are not functions
collection.on('add remove change', this.forceUpdate.bind(this, null)); collection.on('add remove change', this.forceUpdate.bind(this, null));
}, this); }, this);
}, },
...@@ -60,9 +65,9 @@ ...@@ -60,9 +65,9 @@
'active': 'active', 'active': 'active',
'completed': 'completed' 'completed': 'completed'
}, },
all: this.setState.bind(this, {nowShowing: ALL_TODOS}), all: this.setState.bind(this, {nowShowing: app.ALL_TODOS}),
active: this.setState.bind(this, {nowShowing: ACTIVE_TODOS}), active: this.setState.bind(this, {nowShowing: app.ACTIVE_TODOS}),
completed: this.setState.bind(this, {nowShowing: COMPLETED_TODOS}) completed: this.setState.bind(this, {nowShowing: app.COMPLETED_TODOS})
}); });
var router = new Router(); var router = new Router();
...@@ -112,7 +117,7 @@ ...@@ -112,7 +117,7 @@
}, },
save: function (todo, text) { save: function (todo, text) {
todo.save({'title': text}); todo.save({title: text});
this.setState({editing: null}); this.setState({editing: null});
}, },
...@@ -127,15 +132,15 @@ ...@@ -127,15 +132,15 @@
}, },
render: function () { render: function () {
var footer = null; var footer;
var main = null; var main;
var todos = this.props.todos; var todos = this.props.todos;
var shownTodos = todos.filter(function (todo) { var shownTodos = todos.filter(function (todo) {
switch (this.state.nowShowing) { switch (this.state.nowShowing) {
case ACTIVE_TODOS: case app.ACTIVE_TODOS:
return !todo.get('completed'); return !todo.get('completed');
case COMPLETED_TODOS: case app.COMPLETED_TODOS:
return todo.get('completed'); return todo.get('completed');
default: default:
return true; return true;
...@@ -208,17 +213,7 @@ ...@@ -208,17 +213,7 @@
}); });
React.renderComponent( React.renderComponent(
<TodoApp todos={new Todos()} />, <TodoApp todos={app.todos} />,
document.getElementById('todoapp') document.getElementById('todoapp')
); );
})();
React.renderComponent(
<div>
<p>Double-click to edit a todo</p>
<p>Created by{' '}
<a href="http://github.com/petehunt/">petehunt</a>
</p>
<p>Part of{' '}<a href="http://todomvc.com">TodoMVC</a></p>
</div>,
document.getElementById('info'));
})(window, React);
labs/architecture-examples/react-backbone/js/footer.jsx
View file @ 28bdc919
...@@ -5,11 +5,13 @@ ...@@ -5,11 +5,13 @@
/*jshint white:false */ /*jshint white:false */
/*jshint trailing:false */ /*jshint trailing:false */
/*jshint newcap:false */ /*jshint newcap:false */
/*global React, ALL_TODOS, ACTIVE_TODOS, Utils, COMPLETED_TODOS */ /*global React */
(function (window) { var app = app || {};
(function () {
'use strict'; 'use strict';
window.TodoFooter = React.createClass({ app.TodoFooter = React.createClass({
render: function () { render: function () {
var activeTodoWord = this.props.count === 1 ? 'item' : 'items'; var activeTodoWord = this.props.count === 1 ? 'item' : 'items';
var clearButton = null; var clearButton = null;
...@@ -24,13 +26,9 @@ ...@@ -24,13 +26,9 @@
); );
} }
var show = { // React idiom for shortcutting to `classSet` since it'll be used often
ALL_TODOS: '', var cx = React.addons.classSet;
ACTIVE_TODOS: '', var nowShowing = this.props.nowShowing;
COMPLETED_TODOS: ''
};
show[this.props.nowShowing] = 'selected';
return ( return (
<footer id="footer"> <footer id="footer">
<span id="todo-count"> <span id="todo-count">
...@@ -39,15 +37,27 @@ ...@@ -39,15 +37,27 @@
</span> </span>
<ul id="filters"> <ul id="filters">
<li> <li>
<a href="#/" className={show[ALL_TODOS]}>All</a> <a
href="#/"
className={cx({selected: nowShowing === app.ALL_TODOS})}>
All
</a>
</li> </li>
{' '} {' '}
<li> <li>
<a href="#/active" className={show[ACTIVE_TODOS]}>Active</a> <a
href="#/active"
className={cx({selected: nowShowing === app.ACTIVE_TODOS})}>
Active
</a>
</li> </li>
{' '} {' '}
<li> <li>
<a href="#/completed" className={show[COMPLETED_TODOS]}>Completed</a> <a
href="#/completed"
className={cx({selected: nowShowing === app.COMPLETED_TODOS})}>
Completed
</a>
</li> </li>
</ul> </ul>
{clearButton} {clearButton}
...@@ -55,4 +65,4 @@ ...@@ -55,4 +65,4 @@
); );
} }
}); });
})(window); })();
labs/architecture-examples/react-backbone/js/todo.js
View file @ 28bdc919
(function (window, Backbone) { /*global Backbone */
var app = app || {};
(function () {
'use strict'; 'use strict';
window.Todo = Backbone.Model.extend({ // Todo Model
// ----------
// Our basic **Todo** model has `title`, `order`, and `completed` attributes.
app.Todo = Backbone.Model.extend({
// Default attributes for the todo // Default attributes for the todo
// and ensure that each todo created has `title` and `completed` keys. // and ensure that each todo created has `title` and `completed` keys.
defaults: { defaults: {
...@@ -16,4 +23,4 @@ ...@@ -16,4 +23,4 @@
}); });
} }
}); });
})(window, Backbone); })();
labs/architecture-examples/react-backbone/js/todoItem.jsx
View file @ 28bdc919
...@@ -5,14 +5,16 @@ ...@@ -5,14 +5,16 @@
/*jshint white: false */ /*jshint white: false */
/*jshint trailing: false */ /*jshint trailing: false */
/*jshint newcap: false */ /*jshint newcap: false */
/*global React, Utils */ /*global React */
(function (window) { var app = app || {};
(function () {
'use strict'; 'use strict';
var ESCAPE_KEY = 27; var ESCAPE_KEY = 27;
var ENTER_KEY = 13; var ENTER_KEY = 13;
window.TodoItem = React.createClass({ app.TodoItem = React.createClass({
getInitialState: function () { getInitialState: function () {
return {editText: this.props.todo.get('title')}; return {editText: this.props.todo.get('title')};
}, },
...@@ -42,10 +44,10 @@ ...@@ -42,10 +44,10 @@
}, },
handleKeyDown: function (event) { handleKeyDown: function (event) {
if (event.keyCode === ESCAPE_KEY) { if (event.which === ESCAPE_KEY) {
this.setState({editText: this.props.todo.get('title')}); this.setState({editText: this.props.todo.get('title')});
this.props.onCancel(); this.props.onCancel();
} else if (event.keyCode === ENTER_KEY) { } else if (event.which === ENTER_KEY) {
this.handleSubmit(); this.handleSubmit();
} }
}, },
...@@ -84,4 +86,4 @@ ...@@ -84,4 +86,4 @@
); );
} }
}); });
})(window); })();
labs/architecture-examples/react-backbone/js/todos.js
View file @ 28bdc919
(function (window, Backbone) { /*global Backbone */
var app = app || {};
(function () {
'use strict'; 'use strict';
window.Todos = Backbone.Collection.extend({ // Todo Collection
// ---------------
// The collection of todos is backed by *localStorage* instead of a remote
// server.
var Todos = Backbone.Collection.extend({
// Reference to this collection's model. // Reference to this collection's model.
model: Todo, model: app.Todo,
// Save all of the todo items under the `"todos"` namespace. // Save all of the todo items under the `"todos"` namespace.
localStorage: new Backbone.LocalStorage('todos-react-backbone'), localStorage: new Backbone.LocalStorage('todos-react-backbone'),
// Filter down the list of all todo items that are finished. // Filter down the list of all todo items that are finished.
completed: function () { completed: function () {
return this.filter(function(todo) { return this.filter(function (todo) {
return todo.get('completed'); return todo.get('completed');
}); });
}, },
// Filter down the list to only todo items that are still not finished.
remaining: function () { remaining: function () {
return this.without.apply(this, this.completed()); return this.without.apply(this, this.completed());
}, },
...@@ -34,4 +42,7 @@ ...@@ -34,4 +42,7 @@
return todo.get('order'); return todo.get('order');
} }
}); });
})(window, Backbone);
// Create our global collection of **Todos**.
app.todos = new Todos();
})();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7