uberllama · February 8, 2015 22:32 · uberllama · Feb 8, 2015
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>Dynamic Segment Bug</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.min.js"></script>
    <script type="text/jsx">
      var Router        = ReactRouter;
      var Route         = Router.Route,
          DefaultRoute  = Router.DefaultRoute,
          Link          = Router.Link,
          RouteHandler  = Router.RouteHandler;

      var PostStore = {
        posts: [
          {id: 1, title: "Foo", body: "Lorem you win some"},
          {id: 2, title: "Bar", body: "Lorem you lose some"},
          {id: 3, title: "Cat", body: "Lorem come get some"},
        ],
        getAll: function(cb) {
          cb(this.posts);
        },
        getResource: function(id, cb) {
          for (var i = 0; i < this.posts.length; i++) {
            if (this.posts[i].id == id) {
              cb(this.posts[i]);
              break;
            }
          }
        }
      };

      var App = React.createClass({
        render: function () {
          return (
            <div>
              <RouteHandler/>
            </div>
          );
        }
      });

      var Posts = React.createClass({
        getInitialState: function() {
          return {
            loaded: false,
            posts: []
          };
        },
        componentDidMount: function() {
          PostStore.getAll(this.setStateFromStore);
        },
        setStateFromStore: function(posts) {
          this.setState({
            loaded: true,
            posts: posts
          });
        },
        render: function () {
          if (!this.state.loaded) { return <div>Loading...</div>; }
          var links = this.state.posts.map(function(post) {
            return (
              <li>{post.title} <Link to='editPost' params={post}>Edit</Link></li>
            );
          });
          return (
            <div>
              <h1>Posts</h1>
              <ul>
                {links}
              </ul>
            </div>
          );
        }
      });

      var EditPost = React.createClass({
        mixins: [Router.State],
        getInitialState: function() {
          return {
            loaded: false,
            post: {}
          };
        },
        componentDidMount: function() {
          this.getResource();
        },
        componentWillReceiveProps: function() {
          this.getResource();
        },
        getResource: function() {
          PostStore.getResource(this.getParams().id, this.setStateFromStore);
        },
        setStateFromStore: function(post) {
          this.setState({
            loaded: true,
            post: post
          });
        },
        render: function () {
          if (!this.state.loaded) { return <div>Loading...</div>; }
          return (
            <div>
              <h1>{this.state.post.title}</h1>
              <Form post={this.state.post} />
            </div>
          );
        }
      });

      var Form = React.createClass({
        render: function() {
          return (
            <form>
              <Input value={this.props.post.title}/>
              <Input value={this.props.post.body}/>
            </form>
          );
        }
      });

      var Input = React.createClass({
        getInitialState: function() {
          return {value: this.props.value};
        },
        handleChange: function(event) {
          this.setState({value: event.target.value});
        },
        render: function() {
          return <input type="text" value={this.state.value} onChange={this.handleChange} />;
        }
      });

      var routes = (
        <Route name='app' path='/' handler={App}>
          <Route name='editPost' path='/posts/:id/edit' handler={EditPost}/>
          <DefaultRoute handler={Posts}/>
        </Route>
      );

      Router.run(routes, function(Handler) {
        React.render(<Handler/>, document.getElementById('app'));
      });
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Dynamic Segment Bug</title>
	</head>
	<body>
	<div id="app"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.11.6/react-router.min.js"></script>
	<script type="text/jsx">
	var Router = ReactRouter;
	var Route = Router.Route,
	DefaultRoute = Router.DefaultRoute,
	Link = Router.Link,
	RouteHandler = Router.RouteHandler;

	var PostStore = {
	posts: [
	{id: 1, title: "Foo", body: "Lorem you win some"},
	{id: 2, title: "Bar", body: "Lorem you lose some"},
	{id: 3, title: "Cat", body: "Lorem come get some"},
	],
	getAll: function(cb) {
	cb(this.posts);
	},
	getResource: function(id, cb) {
	for (var i = 0; i < this.posts.length; i++) {
	if (this.posts[i].id == id) {
	cb(this.posts[i]);
	break;
	}
	}
	}
	};

	var App = React.createClass({
	render: function () {
	return (
	<div>
	<RouteHandler/>
	</div>
	);
	}
	});

	var Posts = React.createClass({
	getInitialState: function() {
	return {
	loaded: false,
	posts: []
	};
	},
	componentDidMount: function() {
	PostStore.getAll(this.setStateFromStore);
	},
	setStateFromStore: function(posts) {
	this.setState({
	loaded: true,
	posts: posts
	});
	},
	render: function () {
	if (!this.state.loaded) { return <div>Loading...</div>; }
	var links = this.state.posts.map(function(post) {
	return (
	<li>{post.title} <Link to='editPost' params={post}>Edit</Link></li>
	);
	});
	return (
	<div>
	<h1>Posts</h1>
	<ul>
	{links}
	</ul>
	</div>
	);
	}
	});

	var EditPost = React.createClass({
	mixins: [Router.State],
	getInitialState: function() {
	return {
	loaded: false,
	post: {}
	};
	},
	componentDidMount: function() {
	this.getResource();
	},
	componentWillReceiveProps: function() {
	this.getResource();
	},
	getResource: function() {
	PostStore.getResource(this.getParams().id, this.setStateFromStore);
	},
	setStateFromStore: function(post) {
	this.setState({
	loaded: true,
	post: post
	});
	},
	render: function () {
	if (!this.state.loaded) { return <div>Loading...</div>; }
	return (
	<div>
	<h1>{this.state.post.title}</h1>
	<Form post={this.state.post} />
	</div>
	);
	}
	});

	var Form = React.createClass({
	render: function() {
	return (
	<form>
	<Input value={this.props.post.title}/>
	<Input value={this.props.post.body}/>
	</form>
	);
	}
	});

	var Input = React.createClass({
	getInitialState: function() {
	return {value: this.props.value};
	},
	handleChange: function(event) {
	this.setState({value: event.target.value});
	},
	render: function() {
	return <input type="text" value={this.state.value} onChange={this.handleChange} />;
	}
	});

	var routes = (
	<Route name='app' path='/' handler={App}>
	<Route name='editPost' path='/posts/:id/edit' handler={EditPost}/>
	<DefaultRoute handler={Posts}/>
	</Route>
	);

	Router.run(routes, function(Handler) {
	React.render(<Handler/>, document.getElementById('app'));
	});
	</script>
	</body>
	</html>