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({

    todos

    - +
    + + +
    {main} {footer}