/backbone-react-component

A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server

Primary LanguageJavaScriptMIT LicenseMIT

Backbone.React.Component Build Status

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

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.renderComponent(<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.renderComponent(<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 newComponent = MyComponent({
  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.renderComponent(newComponent, 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 helloWorld = HelloWorld({
  model: model
});
// Render to an HTML string
React.renderComponentToString(helloWorld);
// Updating the model
model.set('helloWorld', 'Hi again!');
// Rendering to an HTML string again
React.renderComponentToString(helloWorld);

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()

Crawls to the owner of the component searching for a collection.

getModel()

Crawls to the owner of the component searching for a model.

getOwner()

Gets the component owner (greatest parent component).

Examples