diff --git a/examples/todomvc-backbone/js/app.js b/examples/todomvc-backbone/js/app.js
index b40f7e0ce0..6bf31c2618 100644
--- a/examples/todomvc-backbone/js/app.js
+++ b/examples/todomvc-backbone/js/app.js
@@ -73,8 +73,6 @@ var Utils = {
// Begin React stuff
-var ENTER_KEY = 13;
-
var TodoItem = React.createClass({
handleSubmit: React.autoBind(function(event) {
var val = this.refs.editField.getDOMNode().value;
@@ -180,12 +178,12 @@ var TodoApp = React.createClass({
}
return false;
}),
- toggleAll: function(event) {
+ toggleAll: React.autoBind(function(event) {
var checked = event.nativeEvent.target.checked;
this.props.todos.map(function(todo) {
todo.set('completed', checked);
});
- },
+ }),
destroy: function(todo) {
this.props.todos.remove(todo);
},
@@ -196,11 +194,11 @@ var TodoApp = React.createClass({
todo.set('title', text);
this.setState({editing: null});
},
- clearCompleted: function() {
+ clearCompleted: React.autoBind(function() {
this.props.todos.completed().map(function(todo) {
todo.destroy();
});
- },
+ }),
render: function() {
var footer = null;
var main = null;
@@ -211,13 +209,13 @@ var TodoApp = React.createClass({
var activeTodoCount = this.props.todos.remaining().length;
var completedCount = todoItems.length - activeTodoCount;
if (activeTodoCount || completedCount) {
- footer = ;
+ footer = ;
}
if (todoItems.length) {
main = (
-
+
{todoItems}
diff --git a/examples/todomvc/css/base.css b/examples/todomvc/css/base.css
index 0dd341d638..75da1519b4 100644
--- a/examples/todomvc/css/base.css
+++ b/examples/todomvc/css/base.css
@@ -418,4 +418,8 @@ body {
left: 0;
top: 0;
padding: 10px;
-}
\ No newline at end of file
+}
+
+.submitButton {
+ display: none;
+}
diff --git a/examples/todomvc/js/app.js b/examples/todomvc/js/app.js
index b18ce6275d..4703902442 100644
--- a/examples/todomvc/js/app.js
+++ b/examples/todomvc/js/app.js
@@ -31,24 +31,19 @@ function cx(obj) {
return s;
}
-var ENTER_KEY = 13;
-
var TodoItem = React.createClass({
- getInitialState: function() {
- return {editValue: this.props.todo.title};
- },
- onKeyUp: function(event) {
- this.setState({editValue: event.target.value});
- var val = event.target.value.trim();
- if (event.nativeEvent.keyCode !== ENTER_KEY || !val) {
- return;
+ handleSubmit: React.autoBind(function() {
+ var val = this.refs.editField.getDOMNode().value.trim();
+ if (val) {
+ this.props.onSave(val);
+ this.refs.editField.getDOMNode().value = '';
}
- this.props.onSave(val);
- },
- onEdit: function() {
+ return false;
+ }),
+ handleEdit: React.autoBind(function() {
this.props.onEdit();
this.refs.editField.getDOMNode().focus();
- },
+ }),
render: function() {
return (
-
@@ -59,10 +54,13 @@ var TodoItem = React.createClass({
checked={this.props.todo.completed ? 'checked' : null}
onChange={this.props.onToggle}
/>
-
+
-
+
);
}
@@ -91,26 +89,25 @@ var TodoFooter = React.createClass({
var TodoApp = React.createClass({
getInitialState: function() {
return {
- todos: Utils.store('todos-react'),
- newTodoValue: '',
+ todos: Utils.store('react-todos'),
editing: {}
};
},
- handleKeyUp: function(event) {
- this.setState({newTodoValue: event.target.value});
- var val = event.target.value.trim();
- if (event.nativeEvent.keyCode !== ENTER_KEY || !val) {
- return;
+ handleSubmit: React.autoBind(function() {
+ var val = this.refs.newField.getDOMNode().value.trim();
+ if (val) {
+ var todos = this.state.todos;
+ todos.push({
+ id: Utils.uuid(),
+ title: val,
+ completed: false
+ });
+ this.setState({todos: todos});
+ this.refs.newField.getDOMNode().value = '';
}
- var todos = this.state.todos;
- todos.push({
- id: Utils.uuid(),
- title: val,
- completed: false
- });
- this.setState({todos: todos, newTodoValue: ''});
- },
+ return false;
+ }),
toggleAll: function(event) {
var checked = event.nativeEvent.target.checked;
@@ -154,7 +151,7 @@ var TodoApp = React.createClass({
},
render: function() {
- Utils.store(this.props.localStorageKey || 'todos-react', this.state.todos);
+ Utils.store('react-todos', this.state.todos);
var footer = null;
var main = null;
var todoItems = this.state.todos.map(function(todo) {
@@ -200,13 +197,15 @@ var TodoApp = React.createClass({