handling backbone model/collection changes in react.js

Question

I\'ve been working with facebooks framework React.js together with Backbone for the last couple of weeks and I\'m still not entirely sure what is the most appropriate way to

Answer 1

Instead of manually binding event listeners, you can use a mixin based on this BackboneMixin to help automatically bind and unbind the listeners:

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

Then you simply write

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

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

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

and the component will be rerendered when anything changes in the collection. You only need to put BackboneMixin on the top-level component -- any descendants will be rerendered automatically at the same time.