Backbone.React.Component
Backbone.React.Component
is a mixin and API that glues Backbone models and collections into React components.
When used as a mixin the component is mounted, a wrapper starts listening to models and collections changes to automatically set your component state 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.
API Usage
;;; var collection1 = hello: 1 hello: 2; Component { backboneReact; } { backboneReact; } { return <div> thisstatemyCollection </div> ; }
Mixin Usage
One model
var MyComponent = React; var model = foo: 'bar'; ReactDOM;// Update the UImodel;
MyComponent
will listen to any model changes, making the UI refresh.
One collection
var MyComponent = React;var collection = id: 0 helloWorld: 'Hello world!' id: 1 helloWorld: 'Hello world!'; ReactDOM;
Multiple models and collections
var MyComponent = React; var MyFactory = React; var newComponent = ;ReactDOM;
Usage on the server (Node.js)
var Backbone = ;var backboneMixin = ;var React = ; var model = helloWorld: 'Hello world!';var HelloWorld = React;var HelloWorldFactory = React; // Render to an HTML stringReactDOM;// Updating the modelmodel;// Rendering to an HTML string againReactDOM;
API
on(component, modelsAndCollectionsObject)
Binds all models/collections found inside modelsAndCollectionsObject
to
component
. modelsAndCollectionsObject
takes the following form:
models: a: // binds to `@state.a` collections: b: // binds to `@state.b`
onModel(component, modelsObject)
Shortcut method to #on
. modelsObject
can either be an object of
Backbone.Model
s or a single instance of one.
onCollection(component, collectionsObject
Shortcut method to #on
. collectionsObject
can either be an object of
Backbone.Collection
s or a single instance of one.
off(component)
Teardown method. Unbinds all models and collections from component
.
Mixin 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 if jQuery
is present, else it fallbacks to native DOM querySelector
.
getCollection()
Grabs the component's collection(s) or from one of the parents.
getModel()
Grabs the component's model(s) or from one of the parents.
overrideModel()
Hook that can be implemented to return a model or multiple models. This hook is
executed when the component is initialized. It's useful on cases such as when
react-router
is being used.
overrideCollection()
Hook that can be implemented to return a collection or multiple collections.
This hook is executed when the component is initialized. It's useful on cases
such as when react-router
is being used.