Skip to content

clayallsopp/react.backbone

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react.backbone

Build Status

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;
}

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