Why React component not aware changes of a backbone collection?

Question

I'm learning to use backbone and react. I'm using react as the V in MV* and backbone for Model. But there's a problem: I passed a backbone collection to a react component, when I add more models to this collection, react is not updating. And if I listen on collection changing event and call react method: forceUpdate, react will reflect the changes. So I guess react is not aware of the changes happened in the collection object. How can I make react automatically update with backbone?

Bernardo Bernardo · Accepted Answer · 2014-05-01T16:44:54

React doesn't have any native way to listen to Backbone events of any kind. It's entirely unaware of your Backbone code. Solving this depends entirely on how you want to architect your solution.

1) You could simply manually wire up Backbone events to your component's forceUpate() on component initialization:

React.createClass(
{
    componentWillMount: function()
    {
        // For models:
        this.props.model.on("change", this.forceUpdate);

        // For collections:
        this.props.collection.on("change", this.forceUpdate);
        this.props.collection.on("add", this.forceUpdate);
        this.props.collection.on("remove", this.forceUpdate);
        this.props.collection.on("reset", this.forceUpdate);
    }
});

2) You could write a mixin that copies Model or Collection properties into the React component's state, and calls setState on Model/Collection changes:

3) You could use an existing Mixin like React.Backbone: https://github.com/usepropeller/react.backbone

Why React component not aware changes of a backbone collection?

1 Answers