reactjs - 如何将 React-Router 与模型结合使用

Question

正如您从 React todomvc 中看到的那样1 ，确保 UI 与模型保持同步的一种方法是让模型订阅渲染函数(如下所示)，以便 UI 在每次更改时呈现。

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

model.subscribe(render);
render();

如果在应用程序中使用 React 路由器，则必须将 React.render 调用包装在路由器中，如 as 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 路由器，那么我个人认为使用此模型并不是真正的最佳方法。最终，我认为解决所有这些问题的一个更好的解决方案是根本不使用这个模型，而只是使用 React 来处理所有的变化。但是，如果您尝试使用现有模型和 react 路由器执行此操作，我会在应用程序根目录下引用状态中的模型，然后将 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);
});