如何将 React-Router 与模型一起使用

Question

从React todomvc1 可以看出，确保 ui 与模型保持同步的一种方法是让模型订阅渲染函数（如下所示），以便 UI每次更改都会呈现。

function render() {
    React.render(
        <TodoApp model={model}/>,
        document.getElementById('todoapp')
    );
}

model.subscribe(render);
render();

如果在应用程序中使用 React 路由器，则必须将 React.render 调用包装在路由器中，如 showas shown by this demo

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

那么，如果您还需要更新模型，您将如何使用路由器？即如何将React.render 包装在路由器和function render 中？这会产生范围问题

 function render() {
        Router.run(routes, function (Handler) {
        React.render(
            <TodoApp model={model}/>,
            document.getElementById('todoapp')
        );
        });
    }

    model.subscribe(render);
    render();

Answer 1

我认为，如果您要创建一个完全反应的应用程序并使用反应路由器，那么我个人认为使用这种模型并不是最好的方法。最终我认为更好的解决方案是完全不使用这个模型，而只是使用 react 来处理所有的变化。但是，如果您要尝试使用现有模型和 react-router 执行此操作，我会在您的应用程序的根目录中引用 state 中的模型，然后将 setState 传递给模型订阅方法。
http://jsfiddle.net/xw8uc0nf/3/

var model = TodoModel

var App = React.createClass({

getInitialState: function(){
    return({localModel: model});
},
componentDidMount: function(){
    model.subscribe(this.updateModel.bind(this))
},

updateModel: function(){
    this.setState({localModel: model});
},
  render: function () {
    return (
      <div>
        <header>Super TODO app</header>
        <TodoApp model={@state.localModel} />
      </div>
    );
  }
});

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});