Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jhudson8/react-backbone

backbone-aware mixins for react and a whole lot more
https://github.com/jhudson8/react-backbone

Last synced: 19 days ago
JSON representation

backbone-aware mixins for react and a whole lot more

Awesome Lists containing this project

README 

        
react-backbone

==============

Give [Backbone](http://backbonejs.org/) awareness to your [React](http://facebook.github.io/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](https://github.com/jhudson8/react-mixin-manager)

* [jhudson8/react-events](https://github.com/jhudson8/react-events)

* [jhudson8/backbone-xhr-events](https://github.com/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](http://jhudson8.github.io/fancydocs/index.html#project/jhudson8/react-backbone)



## Tutorials



* [Handling model/collection changes and XHR loading indicators](https://github.com/jhudson8/react-backbone/tree/master/tutorials/collection-binding)

* [Forms validation and input field binding](https://github.com/jhudson8/react-backbone/tree/master/tutorials/forms)

* [Using managed events and mixin dependencies to create a responsive component](https://github.com/jhudson8/react-backbone/tree/master/tutorials/responsive-design)

* [Custom event handlers and event driven applications](https://github.com/jhudson8/react-backbone/blob/master/tutorials/event-driven-app)