[Pephers]

Not enterprise kind-of large, but I'm in the process of building a booking web app (https://zapla.co) using React and Backbone Models/Collections.

I made the decision to switch from Backbone.View to React about ~2 weeks into the project, and so far I'm extremely pleased with it and have not regretted it! Unfortunately, the code isn't open source though.

[linhmtran168]

How do you bind Backbone Models/Collections to React Components as in the case with Backbone.View?

[Pephers]

What I've settled with for now is to attach an instance of the Model/Collection as a prop on the React component and syncing it to Reacts' state.

I do this by attaching a callback on the sync, add, change, remove events and use the the toJSON() method to copy it to the React state like so:

this.setState({data: this.props.model.toJSON()});

When saving a form, I have a method which handles the form submission. It copies over the state to the model and then saves it using:

this.props.model.set(this.state.data);

this.props.model.save();

In additional to this, I've built a tiny dispatcher to instantitiate my models and collections only once. In this way all parts of the app will always work on the same data and by in sync.

[UberMouse]

I use React.Backbone for this. Very easy to use, makes sure the components rerender whenever the model or collection they are bound to changes.

https://github.com/usepropeller/react.backbone