Backbone.React.Component ![Build Status](https://camo.githubusercontent.com/d4035d9402f55748de95f7facd157f52de68ae48a36ccbdaf0a9f72350e49081/68747470733a2f2f7472617669732d63692e6f72672f6d6167616c6861732f6261636b626f6e652d72656163742d636f6d706f6e656e742e706e67)
Backbone.React.Component
is a mixin that glues Backbone models and collections into React components.
When the component is mounted, a wrapper starts listening to models and collections changes to automatically set your component props and achieve UI binding through reactive updates.
Table of Contents generated with DocToc
Dependencies
How To
Using Bower
bower install backbone-react-component
Using Npm
npm install backbone-react-component
If you're not using Bower nor Npm download the source from the dist folder or use CDNJS.
Usage
The mixin only works if set on the root component. You can use it on child components as well, but it won't work nor make a difference if the root component of those children is not using the mixin.
One model
var MyComponent = React.createClass({
mixins: [Backbone.React.Component.mixin],
render: function () {
return <div>{this.props.foo}</div>;
}
});
var model = new Backbone.Model({foo: 'bar'});
React.render(<MyComponent model={model} />, document.body);
// Update the UI
model.set('foo', 'Hello world!');
MyComponent
will listen to any model changes, making the UI refresh.
One collection
var MyComponent = React.createClass({
mixins: [Backbone.React.Component.mixin],
createEntry: function (entry) {
return <div>{entry.helloWorld}</div>;
},
render: function () {
return <div>{this.props.collection.map(this.createEntry)}</div>;
}
});
var collection = new Backbone.Collection([{helloWorld: 'Hello world!'}]);
React.render(<MyComponent collection={collection} />, document.body);
Multiple models and collections
var MyComponent = React.createClass({
mixins: [Backbone.React.Component.mixin],
createEntry: function (entry) {
return <div>{entry.helloWorld}</div>;
},
render: function () {
return (
<div>
{this.props.firstModel.helloWorld}
{this.props.secondModel.helloWorld}
{this.props.firstCollection.map(this.createEntry)}
{this.props.secondCollection.map(this.createEntry)}
</div>
);
}
});
var MyFactory = React.createFactory(MyComponent);
var newComponent = MyFactory({
model: {
firstModel: new Backbone.Model({helloWorld: 'Hello world!'}),
secondModel: new Backbone.Model({helloWorld: 'Hello world!'})
},
collection: {
firstCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}]),
secondCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}])
}
});
React.render(newComponent, document.body);
Child Components
There are many ways of embracing this library when it comes to child components, the following are some of the possible patterns:
React
way, pass handlers from your top component through the child components and communicate that way- Simply rely on
@getModel
and@getCollection
to get your models or collections from the component or it parents (tighter coupling) - Create new root components, like on the example below:
var ChildComponent = React.createClass({
mixins: [Backbone.React.Component.mixin],
createEntry: function(entry) {
return (
<div>{entry.helloWorld}</div>
);
},
render: function() {
return (
<div className='child'>
{this.props.collection.map(this.createEntry)}
</div>
);
}
});
var ParentComponent = React.createClass({
componentDidMount: function() {
var collection = new Backbone.Collection([{ helloWorld: 'Hello world!' }]);
// Remount child as a new root component.
React.render(
<ChildComponent collection={collection} />,
this.refs.childContainer.getDOMNode()
);
},
render: function() {
return (
<div className='parent'>
<div ref='childContainer' />
</div>
);
}
});
React.render(<ParentComponent />, document.body);
Usage on the server (Node.js)
var Backbone = require('backbone');
var backboneMixin = require('backbone-react-component');
var React = require('react');
var model = new Backbone.Model({
helloWorld: 'Hello world!'
});
var HelloWorld = React.createClass({
mixins: [backboneMixin],
render: function () {
return React.DOM.div({}, this.props.helloWorld);
}
});
var HelloWorldFactory = React.createFactory(HelloWorld);
// Render to an HTML string
React.renderToString(HelloWorldFactory({model: model}));
// Updating the model
model.set('helloWorld', 'Hi again!');
// Rendering to an HTML string again
React.renderToString(HelloWorldFactory({model: model}));
API
The following API is under Backbone.React.Component.mixin
(require('backbone-react-component')
):
$
Inspired by Backbone.View, it's a shortcut to this.$el.find method.
getCollection()
Grabs the component's collection(s) or from one of the parents.
getModel()
Grabs the component's model(s) or from one of the parents.