Last active
August 29, 2015 14:10
-
-
Save kangax/ae6f670426551def6f25 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var TodoApp = Backbone.View.extend({ | |
template: Handlebars.compile( | |
'<div>\ | |
<h3>TODO</h3>\ | |
{{#each items}}\ | |
{{ this }}\ | |
{{/each}}\ | |
<form>\ | |
<input value="{{ text }}">\ | |
<button>Add #{{ items.length }}</button>\ | |
</form>\ | |
</div>' | |
), | |
events: { | |
'submit form': 'handleSubmit', | |
'change input': 'onChange' | |
}, | |
initialize: function() { | |
this.items = [ ]; | |
this.text = ''; | |
}, | |
onChange: function(e) { | |
this.text = e.target.value; | |
this.render(); | |
}, | |
handleSubmit: function(e) { | |
e.preventDefault(); | |
this.items = this.items.concat([this.text]); | |
this.text = ''; | |
this.render(); | |
}, | |
render: function() { | |
this.$el.html(this.template(this)); | |
} | |
}); | |
var app = new TodoApp(); | |
app.render({ el: 'body' }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var $R = React.createElement; | |
var TodoList = React.createClass({displayName: 'TodoList', | |
render: function() { | |
return $R("ul", null, this.props.items.map(function(itemText) { | |
return $R("li", null, itemText); | |
})); | |
} | |
}); | |
var TodoApp = React.createClass({displayName: 'TodoApp', | |
getInitialState: function() { | |
return {items: [], text: ''}; | |
}, | |
onChange: function(e) { | |
this.setState({text: e.target.value}); | |
}, | |
handleSubmit: function(e) { | |
e.preventDefault(); | |
var nextItems = this.state.items.concat([this.state.text]); | |
var nextText = ''; | |
this.setState({items: nextItems, text: nextText}); | |
}, | |
render: function() { | |
return ( | |
$R("div", null, | |
$R("h3", null, "TODO"), | |
$R(TodoList, {items: this.state.items}), | |
$R("form", {onSubmit: this.handleSubmit}, | |
$R("input", {onChange: this.onChange, value: this.state.text}), | |
$R("button", null, 'Add #' + (this.state.items.length + 1)) | |
) | |
) | |
); | |
} | |
}); | |
React.render($R(TodoApp, null), mountNode); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var TodoList = React.createClass({ | |
render: function() { | |
var createItem = function(itemText) { | |
return <li>{itemText}</li>; | |
}; | |
return <ul>{this.props.items.map(createItem)}</ul>; | |
} | |
}); | |
var TodoApp = React.createClass({ | |
getInitialState: function() { | |
return {items: [], text: ''}; | |
}, | |
onChange: function(e) { | |
this.setState({text: e.target.value}); | |
}, | |
handleSubmit: function(e) { | |
e.preventDefault(); | |
var nextItems = this.state.items.concat([this.state.text]); | |
var nextText = ''; | |
this.setState({items: nextItems, text: nextText}); | |
}, | |
render: function() { | |
return ( | |
<div> | |
<h3>TODO</h3> | |
<TodoList items={this.state.items} /> | |
<form onSubmit={this.handleSubmit}> | |
<input onChange={this.onChange} value={this.state.text} /> | |
<button>{'Add #' + (this.state.items.length + 1)}</button> | |
</form> | |
</div> | |
); | |
} | |
}); | |
React.render(<TodoApp />, mountNode); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment