react-backbone

Give Backbone awareness to your React components and so much more.

• give Backbone.Model / Backbone.Collection awareness to your React components
• mixins for updating on model change events, be aware of model xhr activity and model validation events and more
• add Backbone.View like declaritive events to your React components
• add dependency management to your React mixins
• use Backbone.Model-aware input components
• includes managed event bindings which will clean up when the React component is unmounted

This project indludes/depends on the following other projects

• jhudson8/react-mixin-manager
• jhudson8/react-events
• jhudson8/backbone-xhr-events

Common Examples

    React.createClass({
      mixins: ['modelChangeAware'],

      render: function() {
        // will be called any time this.props.model is changed
      }
    });

    React.createClass({
      mixins: ['modelXHRAware'],

      render: function() {
        // this.state.loading will be truthy during any XHR activity initiated by this.props.model
      }
    });

    React.createClass({
      mixins: ['modelEvents'],

      events: {
        'model:foo': 'onFoo',
        '*throttle(300)->model:foo': 'onThrottledFoo'
        ''
      },

      onFoo: function() {
        will be executed when this.props.model triggers the "foo" event
      },

      onThrottledFoo: function() {
        will be executed and throttled (300ms) when this.props.model triggers the "foo" event
      },
    });

Docs

View the installation and API docs

Tutorials

• Handling model/collection changes and XHR loading indicators
• Forms validation and input field binding
• Using managed events and mixin dependencies to create a responsive component
• Custom event handlers and event driven applications