react.backbone

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.

varUserViewComponent=React.createBackboneClass({changeOptions: "change:name",// DEFAULT is "change",render: function(){return(<div><h1>{this.getModel().get("name")}</h1></div>);}});varuser=newBackbone.Model();varUserView=React.createFactory(UserViewComponent);varuserView=UserView({model: user});// Mount your component directlyReact.render(userView,document.getElementById('element'));// Render as a subviewvarProfileViewComponent=React.createClass({render: function(){return(<div><UserViewComponentmodel={this.props.user}/></div>);}});varProfileView=React.createFactory(ProfileViewComponent);varprofileView=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.

varUserViewComponent=React.createBackboneClass({render: function(){return<li>{this.getModel().get('name')}</li>;}});varUsersListViewComponent=React.createBackboneClass({render: function(){varusersList=this.getCollection().map(function(user){return<UserViewComponentmodel={user}/>;});return(<div><ul>{usersList}</ul></div>);}});varusersList=newBackbone.Collection();varUsersListView=React.createFactory(UsersListViewComponent);varusersListView=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:

varCommentViewComponent=React.createBackboneClass({mixins: [// when the view is instantiated,// 'user' and 'comment' can be passed as propsReact.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>);}});varuser=newBackbone.Model();varcomment=newBackbone.Model();varCommentView=React.createFactory(CommentViewComponent);varcommentView=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){returnprops.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){returnmodelOrCollectioninstanceofBackbone.Collection||modelOrCollectioninstanceofMyCustomCollection;}

Installation

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){varUserViewComponent=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).