backbone-react-component

WebJar for backbone-react-component

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

backbone-react-component
Last Version

Last Version

0.8.1
Release Date

Release Date

Type

Type

jar
Description

Description

backbone-react-component
WebJar for backbone-react-component
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/magalhas/backbone-react-component

Download backbone-react-component

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/backbone-react-component/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>backbone-react-component</artifactId>
    <version>0.8.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/backbone-react-component/
implementation 'org.webjars.npm:backbone-react-component:0.8.1'
// https://jarcasting.com/artifacts/org.webjars.npm/backbone-react-component/
implementation ("org.webjars.npm:backbone-react-component:0.8.1")
'org.webjars.npm:backbone-react-component:jar:0.8.1'
<dependency org="org.webjars.npm" name="backbone-react-component" rev="0.8.1">
  <artifact name="backbone-react-component" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='backbone-react-component', version='0.8.1')
)
libraryDependencies += "org.webjars.npm" % "backbone-react-component" % "0.8.1"
[org.webjars.npm/backbone-react-component "0.8.1"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm : underscore jar [1.7.0,2)

Project Modules

There are no modules declared in this project.

Backbone.React.Component Build Status

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

import Backbone from 'backbone';
import backboneReact from 'backbone-react-component';
import React from 'react';

var collection1 = new Backbone.Collection([
  {hello: 1},
  {hello: 2}
]);

export default class Component extends React.Component {
  componentWillMount () {
    backboneReact.on(this, {
      collections: {
        myCollection: collection1
      }
    });
  }

  componentWillUnmount () {
    backboneReact.off(this);
  }

  render () {
    return (
      <div>
        {this.state.myCollection.map((model) => model.hello)}
      </div>
    );
  }
}

Mixin Usage

One model

var MyComponent = React.createClass({
  mixins: [Backbone.React.Component.mixin],
  render: function () {
    return <div>{this.state.model.foo}</div>;
  }
});

var model = new Backbone.Model({foo: 'bar'});

ReactDOM.render(<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 key={entry.id}>{entry.helloWorld}</div>;
  },
  render: function () {
    return <div>{this.state.collection.map(this.createEntry)}</div>;
  }
});
var collection = new Backbone.Collection([
  {id: 0, helloWorld: 'Hello world!'},
  {id: 1, helloWorld: 'Hello world!'}
]);

ReactDOM.render(<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.state.firstModel.helloWorld}
        {this.state.secondModel.helloWorld}
        {this.state.firstCollection.map(this.createEntry)}
        {this.state.secondCollection.map(this.createEntry)}
      </div>
    );
  }
});

var MyFactory = React.createFactory(MyComponent);

var newComponent = MyFactory({
  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!'}])
  }
});
ReactDOM.render(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.state.model.helloWorld);
  }
});
var HelloWorldFactory = React.createFactory(HelloWorld);

// Render to an HTML string
ReactDOM.renderToString(HelloWorldFactory({model: model}));
// Updating the model
model.set('helloWorld', 'Hi again!');
// Rendering to an HTML string again
ReactDOM.renderToString(HelloWorldFactory({model: model}));

API

on(component, modelsAndCollectionsObject)

Binds all models/collections found inside modelsAndCollectionsObject to component. modelsAndCollectionsObject takes the following form:

{
  models: {
    a: new Backbone.Model() // binds to `@state.a`
  },
  collections: {
    b: new Backbone.Collection() // binds to `@state.b`
  }
}

onModel(component, modelsObject)

Shortcut method to #on. modelsObject can either be an object of Backbone.Models or a single instance of one.

onCollection(component, collectionsObject

Shortcut method to #on. collectionsObject can either be an object of Backbone.Collections 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.

Examples

Versions

Version
0.8.1