n4u
/
game_svg_erl_demo


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.5.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.5.0.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">

/** @jsx React.DOM */

var User = React.createClass({
    render: function() {
        console.log(this.props);
        props = JSON.stringify(this.props.tokens);
        nested = JSON.stringify(this.props.nested);
        return (
            <div><h2>{this.props.id}</h2>
            Email: {this.props.email},<br/> Tokens: {props},<br/> Nested: {nested}</div> ); } });

var CommentList = React.createClass({
    render: function() {
        var users = this.props.data.map(function (item) {
            return <User id={item.id} email={item.email} tokens={item.proplist} nested={item.nested_proplists}/>; });
        return (<div class="commentList">{users}</div>); }
});

var CommentBox = React.createClass({
    getInitialState: function() { return {data: []}; },
    loadData: function() {
        var p = this;
        var request = new XMLHttpRequest;
        request.open('GET', this.props.url, true);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {
                data = JSON.parse(request.responseText);
                request = new XMLHttpRequest;
                p.setState({data: data.users});
            } else {
                console.log("Request: " + request);
            }
        };
        request.send();
    },
    componentWillMount: function() { this.loadData(); },
    render: function() {
        return (<div><h1>Users</h1><CommentList data={this.state.data}/></div> ); }});

React.renderComponent(
    <CommentBox url="http://localhost:8000/rest/users" pollInterval={5000}/>,
    document.getElementById('content'));

    </script>
  </body>
</html>