The library for web and native user interfaces.
Clean up todomvc examples: autoBind(), onSubmit
petehunt committed
May 30, 2013 at 11:53 UTC
a52512863e07a70363768a2d5d8da79b869a7fd6
3 files changed
+49
-46
examples/todomvc-backbone/js/app.js
+6
-6
@@ -178,12 +178,12 @@ var TodoApp = React.createClass({
178
}
179
return false;
180
}),
181
- toggleAll: function(event) {
181
+ toggleAll: React.autoBind(function(event) {
182
var checked = event.nativeEvent.target.checked;
183
this.props.todos.map(function(todo) {
184
todo.set('completed', checked);
185
});
186
- },
186
+ }),
187
destroy: function(todo) {
188
this.props.todos.remove(todo);
189
},
@@ -194,11 +194,11 @@ var TodoApp = React.createClass({
194
todo.set('title', text);
195
this.setState({editing: null});
196
},
197
- clearCompleted: function() {
197
+ clearCompleted: React.autoBind(function() {
198
this.props.todos.completed().map(function(todo) {
199
todo.destroy();
200
});
201
- },
201
+ }),
202
render: function() {
203
var footer = null;
204
var main = null;
@@ -209,13 +209,13 @@ var TodoApp = React.createClass({
209
var activeTodoCount = this.props.todos.remaining().length;
210
var completedCount = todoItems.length - activeTodoCount;
211
if (activeTodoCount || completedCount) {
212
- footer = <TodoFooter count={activeTodoCount} completedCount={completedCount} onClearCompleted={this.clearCompleted.bind(this)} />;
212
+ footer = <TodoFooter count={activeTodoCount} completedCount={completedCount} onClearCompleted={this.clearCompleted} />;
213
}
214
215
if (todoItems.length) {
216
main = (
217
<section class="main">
218
- <input class="toggle-all" type="checkbox" onChange={this.toggleAll.bind(this)} />
218
+ <input class="toggle-all" type="checkbox" onChange={this.toggleAll} />
219
<label class="toggle-all-label">Mark all as complete</label>
220
<ul class="todo-list">
221
{todoItems}
examples/todomvc/css/base.css
+5
-1
@@ -418,4 +418,8 @@ body {
418
left: 0;
419
top: 0;
420
padding: 10px;
421
-}
\ No newline at end of file
421
+}
422
+
423
+.submitButton {
424
+ display: none;
425
+}
examples/todomvc/js/app.js
+38
-39
@@ -31,24 +31,19 @@ function cx(obj) {
31
return s;
32
}
33
34
-var ENTER_KEY = 13;
35
-
34
var TodoItem = React.createClass({
37
- getInitialState: function() {
38
- return {editValue: this.props.todo.title};
39
- },
40
- onKeyUp: function(event) {
41
- this.setState({editValue: event.target.value});
42
- var val = event.target.value.trim();
43
- if (event.nativeEvent.keyCode !== ENTER_KEY || !val) {
44
- return;
35
+ handleSubmit: React.autoBind(function() {
36
+ var val = this.refs.editField.getDOMNode().value.trim();
37
+ if (val) {
38
+ this.props.onSave(val);
39
+ this.refs.editField.getDOMNode().value = '';
40
}
46
- this.props.onSave(val);
47
- },
48
- onEdit: function() {
41
+ return false;
42
+ }),
43
+ handleEdit: React.autoBind(function() {
44
this.props.onEdit();
45
this.refs.editField.getDOMNode().focus();
51
- },
46
+ }),
47
render: function() {
48
return (
49
<li class={cx({completed: this.props.todo.completed, editing: this.props.editing})}>
@@ -59,10 +54,13 @@ var TodoItem = React.createClass({
54
checked={this.props.todo.completed ? 'checked' : null}
55
onChange={this.props.onToggle}
56
/>
62
- <label onDoubleClick={this.onEdit.bind(this)}>{this.props.todo.title}</label>
57
+ <label onDoubleClick={this.handleEdit}>{this.props.todo.title}</label>
58
<button class="destroy" onClick={this.props.onDestroy} />
59
</div>
65
- <input ref="editField" class="edit" value={this.state.editValue} onKeyUp={this.onKeyUp.bind(this)} />
60
+ <form onSubmit={this.handleSubmit}>
61
+ <input ref="editField" class="edit" value={this.props.todo.title} />
62
+ <input type="submit" class="submitButton" />
63
+ </form>
64
</li>
65
);
66
}
@@ -91,26 +89,25 @@ var TodoFooter = React.createClass({
89
var TodoApp = React.createClass({
90
getInitialState: function() {
91
return {
94
- todos: Utils.store('todos-react'),
95
- newTodoValue: '',
92
+ todos: Utils.store('react-todos'),
93
editing: {}
94
};
95
},
96
100
- handleKeyUp: function(event) {
101
- this.setState({newTodoValue: event.target.value});
102
- var val = event.target.value.trim();
103
- if (event.nativeEvent.keyCode !== ENTER_KEY || !val) {
104
- return;
97
+ handleSubmit: React.autoBind(function() {
98
+ var val = this.refs.newField.getDOMNode().value.trim();
99
+ if (val) {
100
+ var todos = this.state.todos;
101
+ todos.push({
102
+ id: Utils.uuid(),
103
+ title: val,
104
+ completed: false
105
+ });
106
+ this.setState({todos: todos});
107
+ this.refs.newField.getDOMNode().value = '';
108
}
106
- var todos = this.state.todos;
107
- todos.push({
108
- id: Utils.uuid(),
109
- title: val,
110
- completed: false
111
- });
112
- this.setState({todos: todos, newTodoValue: ''});
113
- },
109
+ return false;
110
+ }),
111
112
toggleAll: function(event) {
113
var checked = event.nativeEvent.target.checked;
@@ -154,7 +151,7 @@ var TodoApp = React.createClass({
151
},
152
153
render: function() {
157
- Utils.store(this.props.localStorageKey || 'todos-react', this.state.todos);
154
+ Utils.store('react-todos', this.state.todos);
155
var footer = null;
156
var main = null;
157
var todoItems = this.state.todos.map(function(todo) {
@@ -200,13 +197,15 @@ var TodoApp = React.createClass({
197
<section class="todoapp">
198
<header class="header">
199
<h1>todos</h1>
203
- <input
204
- class="new-todo"
205
- placeholder="What needs to be done?"
206
- autofocus="autofocus"
207
- onKeyUp={this.handleKeyUp.bind(this)}
208
- value={this.state.newTodoValue}
209
- />
200
+ <form onSubmit={this.handleSubmit}>
201
+ <input
202
+ ref="newField"
203
+ class="new-todo"
204
+ placeholder="What needs to be done?"
205
+ autofocus="autofocus"
206
+ />
207
+ <input type="submit" class="submitButton" />
208
+ </form>
209
</header>
210
{main}
211
{footer}