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.
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.