Plugin for React to make Backbone integration easier. Initialize your component
with a Backbone.Model or Backbone.Collection; when the model or collection
changes, #render will be called.
var UserViewComponent = React.createBackboneClass({
changeOptions: "change:name", // DEFAULT is "change",
render: function() {
return (
<div>
<h1>{this.getModel().get("name")}</h1>
</div>
);
}
});
var user = new Backbone.Model();
var UserView = React.createFactory(UserViewComponent);
var userView = UserView({model: user});
// Mount your component directly
React.render(userView, document.getElementById('element'));
// Render as a subview
var ProfileViewComponent = React.createClass({
render: function() {
return (
<div>
<UserViewComponent model={this.props.user} />
</div>
);
}
});
var ProfileView = React.createFactory(ProfileViewComponent);
var profileView = ProfileView({user: user});
React.render(profileView, document.getElementById('element'));React.Backbone also plays nicely with Backbone.Collection. Anytime the add,
remove, reset or sort events are triggered the component will re-render.
var UserViewComponent = React.createBackboneClass({
render: function() {
return <li>{ this.getModel().get('name') }</li>;
}
});
var UsersListViewComponent = React.createBackboneClass({
render: function() {
var usersList = this.getCollection().map(function(user) {
return <UserViewComponent model={user} />;
});
return (
<div>
<ul>
{ usersList }
</ul>
</div>
);
}
});
var usersList = new Backbone.Collection();
var UsersListView = React.createFactory(UsersListViewComponent);
var usersListView = UsersListView({collection: usersList});
React.render(usersListView, document.getElementById('users'));If you need to use multiple models, you can do so by including the mixin multiple times:
var CommentViewComponent = React.createBackboneClass({
mixins: [
// when the view is instantiated,
// 'user' and 'comment' can be passed as props
React.BackboneMixin("user", "change:name"),
React.BackboneMixin("comment")
],
render: function() {
return (
<div>
<p>{this.props.comment.get("text")}</p>
<p>{'posted by' + this.props.user.get("name")}</h1>
</div>
);
}
});
var user = new Backbone.Model();
var comment = new Backbone.Model();
var CommentView = React.createFactory(CommentViewComponent);
var commentView = CommentView({user: user, comment: comment});
React.render(usersListView, document.getElementById('users'));You can also pass an object with options to the included mixin:
React.BackboneMixin({
propName: "user",
renderOn: "change:name"
});Or supply a custom callback to the option modelOrCollection to retrieve the
property from the component's props:
React.BackboneMixin({
modelOrCollection: function(props) {
return props.comment.user;
},
renderOn: "change:name"
});If your Collection or Model class does not inherit directly from Backbone.Model or Backbone.Collection, you may customize the behavior on a library level by overriding the React.BackboneMixin.ConsiderAsCollection function.
Return true if the object passed should behave as a collection.
React.BackboneMixin.ConsiderAsCollection = function (modelOrCollection) {
return modelOrCollection instanceof Backbone.Collection || modelOrCollection instanceof MyCustomCollection;
}Either download react.backbone.js or install the react.backbone package on
Bower:
bower install --save react.backbone
You can either include react.backbone in a <script> tag (after you've
included Backbone and React) or through RequireJS/AMD:
define(['backbone', 'react', 'react.backbone'], function(Backbone, React) {
var UserViewComponent = React.createBackboneClass({
// ...
});
});Version 0.7.0 supports React >0.14 and Backbone >1.0; for React <0.14, check out versions 0.6.0 and prior. React Native is also supported, but only works with npm v3 (otherwise it will use the wrong React dependency).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent