react.backbone

WebJar for react.backbone

License

License

MIT
Categories

Categories

React User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

react.backbone
Last Version

Last Version

0.9.0
Release Date

Release Date

Type

Type

jar
Description

Description

react.backbone
WebJar for react.backbone
Project URL

Project URL

http://webjars.org

Download react.backbone

How to add to project

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

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

Versions

Version
0.9.0