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.
var UserViewComponent = React; var user = ;var UserView = React;var userView = ; // Mount your component directlyReact; // Render as a subviewvar ProfileViewComponent = React; var ProfileView = React;var profileView = ;React;
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; var UsersListViewComponent = React; var usersList = ;var UsersListView = React;var usersListView = ; React;
If you need to use multiple models, you can do so by including the mixin multiple times:
var CommentViewComponent = React; var user = ;var comment = ;var CommentView = React;var commentView = ; React;
You can also pass an object with options to the included mixin:
React;
Or supply a custom callback to the option modelOrCollection
to retrieve the
property from the component's props:
React;
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.
ReactBackboneMixin { return modelOrCollection instanceof BackboneCollection || modelOrCollection instanceof MyCustomCollection;}
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:
;
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).