prabirshrestha/react-router-qs.html

## react-router-qs.html
<!DOCTYPE HTML>
<html>
    <head>

    </head>
    <body>
        <div id="app"></div>

        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
        <script src="http://backbonejs.org/backbone.js"></script>
        <script src="http://fb.me/react-with-addons-0.9.0.js"></script>
        <script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
        <script type="text/jsx">
            /** @jsx React.DOM */

            var COUNTRIES = ['United States', 'Canada', 'Afghanistan', 'Albania', 'Algeria'];

            var Router = Backbone.Router.extend({
                routes: {
                    ''      : 'index',
                    '?*qs'  : 'index'
                },

                index: function (qs) {
                    console.log('route index exectued');
                    var search = qs ? qs.substr(2) : '';
                    React.renderComponent(<App search={search}/>, document.getElementById('app'));
                }
            });

            var App = React.createClass({
                getInitialState: function () {
                    return { countries: [] };
                },
                componentWillMount: function () {
                    this.fetchCountries();
                },
                fetchCountries: function () {
                    // fake ajax call
                    setTimeout(function () {
                        var countries = COUNTRIES;
                        if (this.props.search) {
                            countries = COUNTRIES.filter(function (c) {
                                return c.toLowerCase().indexOf(this.props.search.toLowerCase()) > -1;
                            }.bind(this));
                        }
                        this.setState({ countries: countries });
                    }.bind(this), 2000);
                },
                render: function () {
                    return <div>
                        <Search search={this.props.search}/>
                        <List countries={this.state.countries}/>
                    </div>;
                }
            });

            var List = React.createClass({
                render: function () {
                    return <div>
                        <ul>
                            {this.props.countries.map(function (country) {
                                return <Item key={country} country={country}/>
                            })}
                        </ul>
                    </div>;
                }
            });

            var Item = React.createClass({
                render: function () {
                    return <li>
                        {this.props.country}
                    </li>;
                }
            });

            var Search = React.createClass({
                handleSearch: function (e) {
                    e.preventDefault();
                    router.navigate('?q=' + this.refs.search.getDOMNode().value, true);
                },
                render: function () {
                    return <div>
                        <input ref="search" type="text" defaultValue={this.props.search} />
                        <input type="submit" onClick={this.handleSearch}/>
                    </div>;
                }
            });

            window.router = new Router();
            Backbone.history.start();
        </script>
    </body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>

	</head>
	<body>
	<div id="app"></div>

	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="http://backbonejs.org/backbone.js"></script>
	<script src="http://fb.me/react-with-addons-0.9.0.js"></script>
	<script src="http://fb.me/JSXTransformer-0.9.0.js"></script>
	<script type="text/jsx">
	/** @jsx React.DOM */

	var COUNTRIES = ['United States', 'Canada', 'Afghanistan', 'Albania', 'Algeria'];

	var Router = Backbone.Router.extend({
	routes: {
	'' : 'index',
	'?*qs' : 'index'
	},

	index: function (qs) {
	console.log('route index exectued');
	var search = qs ? qs.substr(2) : '';
	React.renderComponent(<App search={search}/>, document.getElementById('app'));
	}
	});

	var App = React.createClass({
	getInitialState: function () {
	return { countries: [] };
	},
	componentWillMount: function () {
	this.fetchCountries();
	},
	fetchCountries: function () {
	// fake ajax call
	setTimeout(function () {
	var countries = COUNTRIES;
	if (this.props.search) {
	countries = COUNTRIES.filter(function (c) {
	return c.toLowerCase().indexOf(this.props.search.toLowerCase()) > -1;
	}.bind(this));
	}
	this.setState({ countries: countries });
	}.bind(this), 2000);
	},
	render: function () {
	return <div>
	<Search search={this.props.search}/>
	<List countries={this.state.countries}/>
	</div>;
	}
	});

	var List = React.createClass({
	render: function () {
	return <div>
	<ul>
	{this.props.countries.map(function (country) {
	return <Item key={country} country={country}/>
	})}
	</ul>
	</div>;
	}
	});

	var Item = React.createClass({
	render: function () {
	return <li>
	{this.props.country}
	</li>;
	}
	});

	var Search = React.createClass({
	handleSearch: function (e) {
	e.preventDefault();
	router.navigate('?q=' + this.refs.search.getDOMNode().value, true);
	},
	render: function () {
	return <div>
	<input ref="search" type="text" defaultValue={this.props.search} />
	<input type="submit" onClick={this.handleSearch}/>
	</div>;
	}
	});

	window.router = new Router();
	Backbone.history.start();
	</script>
	</body>
	</html>