Question

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

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

model.subscribe(render);
render();

如果在应用程序中使用React路由器，则必须将React.render调用包装在路由器中，如show 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-router执行此操作，我将在应用程序根目录中对状态模型进行引用，然后将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);
});

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

1 个答案: