kylefang/reactfire
1
0
Fork 0
mirror of https://github.com/zhigang1992/reactfire.git synced 2026-04-24 04:25:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cleaned up Todo App example

Browse Source
This commit is contained in:
jacobawenger
2014-09-04 00:03:47 -07:00
parent 8f62692c1b
commit db12b27dbb
4 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
examples/todoApp/index.html
View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>ReactFireMixin Demo</title>
<title>ReactFire Todo App Demo</title>
<!-- React JS -->
<script src="bower_components/react/react.js"></script>
@@ -24,9 +24,14 @@
<body>
<div id="demoContainer">
<h1>ReactFireMixin Demo</h1>
<h1>ReactFire Todo App Demo</h1>
<p>
ReactFireMixin is a <a href="http://facebook.github.io/react/">ReactJS</a> mixin which allows for easy integration of <a href="http://www.firebase.com/">Firebase</a> into your React apps. See how this was made by reading the <a href="https://firebase.com/blog/2014-05-01-using-firebase-with-react.html">blog post</a> or checking out the <a href="https://github.com/firebase/reactFire">source code on GitHub</a>.
<a href="https://www.firebase.com/docs/web/libraries/react/">ReactFire</a> is a
<a href="http://facebook.github.io/react/">ReactJS</a> mixin which allows for easy
integration of <a href="http://www.firebase.com/">Firebase</a> into your React apps.
See how this was made by reading the
<a href="https://firebase.com/blog/2014-05-01-using-firebase-with-react.html">blog post</a>
or checking out the <a href="https://github.com/firebase/reactfire/">source code on GitHub</a>.
</p>
<div class="todoAppContainer">

21
examples/todoApp/js/todoAppFirebaseExplicit.js
View File

@@ -1,10 +1,10 @@
/** @jsx React.DOM */
var TodoList2 = React.createClass({
render: function() {
var createItem = function(item) {
return <li>{item.text}</li>;
var createItem = function(item, index) {
return <li key={ index }>{ item.text }</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
return <ul>{ this.props.items.map(createItem) }</ul>;
}
});
@@ -16,7 +16,12 @@ var TodoApp2 = React.createClass({
componentWillMount: function() {
this.firebaseRef = new Firebase("https://ReactFireTodoApp.firebaseio.com/items/");
this.firebaseRef.limit(100).on("child_added", function(dataSnapshot) {
this.firebaseRef.limit(25).on("child_added", function(dataSnapshot) {
// Only keep track of 25 items at a time
if (this.items.length === 25) {
this.items.splice(0, 1);
}
this.items.push(dataSnapshot.val());
this.setState({
items: this.items
@@ -45,10 +50,10 @@ var TodoApp2 = React.createClass({
render: function() {
return (
<div>
<TodoList2 items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{"Add #" + (this.state.items.length + 1)}</button>
<TodoList2 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>
);

16
examples/todoApp/js/todoAppFirebaseImplicit.js
View File

@@ -1,10 +1,10 @@
/** @jsx React.DOM */
var TodoList3 = React.createClass({
render: function() {
var createItem = function(item) {
return <li>{item.text}</li>;
var createItem = function(item, index) {
return <li key={ index }>{ item.text }</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
return <ul>{ this.props.items.map(createItem) }</ul>;
}
});
@@ -17,7 +17,7 @@ var TodoApp3 = React.createClass({
componentWillMount: function() {
var firebaseRef = new Firebase("https://ReactFireTodoApp.firebaseio.com/items/");
this.bindAsArray(firebaseRef.limit(100), "items");
this.bindAsArray(firebaseRef.limit(25), "items");
},
onChange: function(e) {
@@ -37,10 +37,10 @@ var TodoApp3 = React.createClass({
render: function() {
return (
<div>
<TodoList3 items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{"Add #" + (this.state.items.length + 1)}</button>
<TodoList3 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>
);

14
examples/todoApp/js/todoAppOriginal.js
View File

@@ -1,10 +1,10 @@
/** @jsx React.DOM */
var TodoList1 = React.createClass({
render: function() {
var createItem = function(item) {
return <li>{item.text}</li>;
var createItem = function(item, index) {
return <li key={ index }>{item.text}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
return <ul>{ this.props.items.map(createItem) }</ul>;
}
});
@@ -33,10 +33,10 @@ var TodoApp1 = React.createClass({
render: function() {
return (
<div>
<TodoList1 items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{"Add #" + (this.state.items.length + 1)}</button>
<TodoList1 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>
);