React Backbone Binding that works with React 16
React Higher Order Component which will bind Backbone Data that works with React Fiber (v.16)
There are already a couple of mixins or components that will link you Backbone model or collection with React, but with the introduction of React Fiber (16.0), the React.createClass
syntax will be deprecated which would suggest mixins are no longer a way to go, thus we’ve reinvented the wheel once again and created withBackbone.
The higher order component will loop through the props you passed in, and for each of those props who are either backbone model or backbone collection, it will be listen to certain events and forceUpdate
if the events are triggered. Here is a table that summerizes the events that will trigger a forceUpdate
:
Backbone | Events |
---|---|
Model | Change |
Collection | Add, Remove, Sort, Reset |
npm install with-backbone
import withBackbone from 'withBackbone';
...
class TestClass extends React.Components {
render () {
return something that renders a backbone model or collection in props, for example user
}
}
TestClass.PropTypes = {
"User": PropTypes.instanceOf(Backbone.Model)
}
export default withBackbone(TestClass);
Now when your user changes, the view component re-render.