javascript – 处理backbone.js中的骨干模型/集合更改

我已经在Facebook的框架React.js与Backbone在过去几个星期,我仍然不完全确定什么是最适当的方式重新渲染React组件,当Backbone集合中有变化时已作为道具通过。

目前我做的是在componentsenentWillMount我设置更改/添加/删除侦听器上的集合和设置状态时触发:

componentWillMount: function(){
    var myCollection = this.props.myCollection;
    var updateState = function(){
        this.setState({myCollection: myCollection.models});
    }

    myCollections.on("add remove", updateState, this);
    updateState();
}

render: function(){
    var listItems = this.state.myCollection.map(function(item){
        return <li>{item.get("someAttr")}</li>;
    });
    return <ul>{listItems}</ul>;
}

我看到了模型被克隆到状态的示例:

var updateState = function () {
    this.setState({ myCollection: _.clone(this.myCollection.models) });
};

我还看到变体,其中在道具中的模型/集合直接使用渲染,而不是使用状态,然后forceUpdate被调用时集合/模型更改,导致组件重新渲染

componentWillMount: function(){
    var myCollection = this.props.myCollection;
    myCollections.on("add remove", this.forceUpdate, this);
}

render: function(){
    var listItems = this.props.myCollection.map(function(item){
        return <li>{item.get("someAttr")}</li>;
    });
    return <ul>{listItems}</ul>;
}

什么好处和缺点有不同的方法吗?
有没有办法做的是“反应的方式”?

最佳答案
而不是手动绑定事件侦听器,您可以使用基于此BackboneMixin的mixin来帮助自动绑定和解除绑定侦听器:

https://github.com/facebook/react/blob/1be9a9e/examples/todomvc-backbone/js/app.js#L148-L171

然后你只需写

var List = React.createClass({
    mixins: [BackboneMixin],

    getBackboneModels: function() {
        return [this.props.myCollection];
    },

    render: function(){
        var listItems = this.props.myCollection.map(function(item){
            return <li>{item.get("someAttr")}</li>;
        });
        return <ul>{listItems}</ul>;
    }
});

并且当集合中发生任何更改时,组件将重新渲染。您只需要在顶层组件中放置BackboneMixin – 任何后代将同时自动重新渲染。

转载注明原文:javascript – 处理backbone.js中的骨干模型/集合更改 - 代码日志