1 var app = app || {}; 2 3 (function () { 4 'use strict'; 5 6 app.ALL_TODOS = 'all'; 7 app.ACTIVE_TODOS = 'active'; 8 app.COMPLETED_TODOS = 'completed'; 9 var TodoFooter = app.TodoFooter; 10 var TodoItem = app.TodoItem; ENTER_KEY = 13; TodoApp = React.createClass({ 15 getInitialState: function () { 16 return { 17 nowShowing: app.ALL_TODOS, 18 editing: null 19 }; 20 }, 21 22 componentDidMount: function () { 23 var setState = this.setState; 24 var router = Router({ 25 'http://www.cnblogs.com/': setState.bind(this, {nowShowing: app.ALL_TODOS}), 26 '/active': setState.bind(this, {nowShowing: app.ACTIVE_TODOS}), 27 '/completed': setState.bind(this, {nowShowing: app.COMPLETED_TODOS}) 28 }); 29 router.init('http://www.cnblogs.com/'); 30 }, 31 32 handleNewTodoKeyDown: function (event) { 33 if (event.keyCode !== ENTER_KEY) { 34 return; 35 } 36 37 event.preventDefault(); val = React.findDOMNode(this.refs.newField).value.trim(); (val) { 42 this.props.model.addTodo(val); 43 React.findDOMNode(this.refs.newField).value = ''; 44 } 45 }, 46 47 toggleAll: function (event) { 48 var checked = event.target.checked; 49 this.props.model.toggleAll(checked); 50 }, 51 52 toggle: function (todoToToggle) { 53 this.props.model.toggle(todoToToggle); 54 }, 55 56 destroy: function (todo) { 57 this.props.model.destroy(todo); 58 }, 59 60 edit: function (todo) { 61 this.setState({editing: todo.id}); 62 }, 63 64 save: function (todoToSave, text) { 65 this.props.model.save(todoToSave, text); 66 this.setState({editing: null}); 67 }, 68 69 cancel: function () { 70 this.setState({editing: null}); 71 }, 72 73 clearCompleted: function () { 74 this.props.model.clearCompleted(); 75 }, 76 77 render: function () { 78 var footer; 79 var main; 80 var todos = this.props.model.todos; shownTodos = todos.filter(function (todo) { 83 switch (this.state.nowShowing) { 84 case app.ACTIVE_TODOS: 85 return !todo.completed; 86 case app.COMPLETED_TODOS: 87 return todo.completed; 88 default: ; 90 } 91 }, this); todoItems = shownTodos.map(function (todo) { 94 return ( 95 <TodoItem 96 key={todo.id} 97 todo={todo} 98 onToggle={this.toggle.bind(this, todo)} 99 onDestroy={this.destroy.bind(this, todo)} 100 onEdit={this.edit.bind(this, todo)} 101 editing={this.state.editing === todo.id} 102 onSave={this.save.bind(this, todo)} 103 onCancel={this.cancel} 104 /> 105 ); 106 }, this); activeTodoCount = todos.reduce(function (accum, todo) { 109 return todo.completed ? accum : accum + 1; 110 }, 0); completedCount = todos.length - activeTodoCount; (activeTodoCount || completedCount) { 115 footer = 116 <TodoFooter 117 count={activeTodoCount} 118 completedCount={completedCount} 119 nowShowing={this.state.nowShowing} 120 onClearCompleted={this.clearCompleted} 121 />; 122 } (todos.length) { 125 main = ( 126 <section className="main"> 127 <input 128 className="toggle-all" 129 type="checkbox" 130 onChange={this.toggleAll} 131 checked={activeTodoCount === 0} 132 /> 133 <ul className="todo-list"> 134 {todoItems} 135 </ul> 136 </section> 137 ); 138 } ( 141 <div> 142 <header className="header"> 143 <h1>todos</h1> 144 <input 145 ref="newField" 146 className="new-todo" 147 placeholder="What needs to be done?" 148 onKeyDown={this.handleNewTodoKeyDown} 149 autoFocus={true} 150 /> 151 </header> 152 {main} 153 {footer} 154 </div> 155 ); 156 } 157 }); model = new app.TodoModel('react-todos'); render() { 162 React.render( 163 <TodoApp model={model}/>, 164 document.getElementsByClassName('todoapp')[0] 165 ); 166 } 167 168 model.subscribe(render); 169 render(); 170 })();

这里同样是创建了一个标签，然后最后一段代码有所不同：