<commit_before>react-backbone
==============
***Problem:*** [React](http://facebook.github.io/react/) components are unaware of [Backbone](http://backbonejs.org/) models by default which cause some to try to embed [React](http://facebook.github.io/react/) components inside a Backbone.View.

***Solution:*** [React](http://facebook.github.io/react/) components should completely replace Backbone.View.  By including some simple mixins, [React](http://facebook.github.io/react/) components can become model-aware and provide as much or more integration expected with a Backbone.View.


Installation
==============
* Browser: include *react-backbone[.min].js* after the listed dependencies
* CommonJS: ```require('react-backbone')(require('react'), require('backbone'));```

Dependencies
--------------
* [React](http://facebook.github.io/react/)
* [Backbone](http://backbonejs.org/)
* [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager) (>= 0.5.0)
* [backbone-async-event](https://github.com/jhudson8/backbone-async-event) (optional)
* [react-events](https://github.com/jhudson8/react-events) (>= 0.2.0 optional)


Mixins
==============
The named mixins exists by including [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager).

See [examples](https://github.com/jhudson8/react-backbone/blob/master/test/test.js#L78)


modelAware
--------------
```
React.createClass({
  mixins: ['modelAware']
});
...
<MyClass ref="myClass" model={model} key="foo"/>
...
var model = this.refs.myClass.getModel();
```
Mixin that exposes getModel/setModel on the component.  The model can also be set by using the ```model``` property when constructing the component.


modelValueAware
--------------
```
React.createClass({
  mixins: ['modelValueAware']
});
...
<MyInputField ref="firstName" model={model}/>
...
this.refs.firstName.setModelValue('<NAME>');
```
Mixin that exposes getModelValue/setModelValue on the component.  By default it uses the ```key``` or ```ref``` property to get the model key.  While the example is not useful (as you should set the model directly), it is more useful for other mixins which would treat the component with only an awareness of the ```modelValueAware``` mixin (for example, the ```modelPopulate``` mixin).


modelPopulate
-------------
```
React.createClass({
  mixins: ['modelAware', 'modelPopulate'],
  render: function() {
    var model = this.getModel();

    // "Input" is some example component that uses the "modelValueAware" mixin to return the DOM value that is appropriate for the model
    return (
      <div>
        First Name: <Input ref="firstName" model={model}/>
        <br/>
        Last Name: <Input ref="lastName" model={model}/>
      </div>
    );
  },
  onSave: function() {
    // wiring for this method is not shown here

    // use this.refs automatically to get the components that will populate the model
    this.modelPopulate(function(model) {
      // assuming the model validation passed, this callback will be executed
    });

    // or for more control
    var attributes = this.modelPopulate();

    // or for even more control
    var attributes = this.modelPopulate(specificComponentsToCheck);
  }
});
```
Mixin that exposes a ```modelPopulate``` method which will iterate through a set of components and call ```setModelValue``` for each compoent and return the populated attributes hash.  The components are expected to be including the ```modelValueAware``` mixin.  In addition, a callback function can be provided (if the parent component includes the ```modelAware``` mixin) which will cause the attributes to be automatically set on the model and the callback function to be executed only if the validation passed on the model.

```modelPopulate(componentArray[, callback, setOptions])```
or
```modelPopulate(callback[, setOptions])```


modelEventAware
--------------
```
var MyClass React.createClass({
  mixins: ['modelEventAware'],
  getInitialState: function() {
    this.modelOn('change', this.onChange);
    return null;
  },
  onChange: function() { ... }
});
```
Exposes model event binding functions that will be cleaned up when the component is unmounted and not actually executed until the component
is mounted.
* ```modelOn(eventName, callback[, context])```;  similar to model.on.  the "context" used if not provided is the React component.
* ```modelOnce(eventName, callback[, context])```;  similar to model.once.  the "context" used if not provided is the React component.
* ```modelOff(eventName, callback[, context])```;  similar to model.off.  the "context" used if not provided is the React component.

***By including [react-events](https://github.com/jhudson8/react-events) you can use declarative bindings like the following:***
```
React.createClass({
  mixins: ['events', 'modelEventAware'],
  events: {
    'model:change': 'onChange'
  },
  onChange: function() { ... }
});
```

modelIndexErrors
--------------
Mixin that exposes a ```modelIndexErrors``` method which returns model validation errors in a standard format.  This is meant to be overridden if a different format is desired.  to do so, use the mixin ```replace``` method using [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager).  See ```modelInvalidAware``` for details on the expected response format.


modelValidator
--------------
Exposes a ```modelValidate(attributes, options)``` method which will call and return the model.validate method if it exists.
If not, undefined will be returned.  If errors are found, the ```modelIndexErrors``` mixin will be used to organize the error response.<commit_msg>update docs<commit_after>react-backbone
==============
***Problem:*** [React](http://facebook.github.io/react/) components are unaware of [Backbone](http://backbonejs.org/) models by default which cause some to try to embed [React](http://facebook.github.io/react/) components inside a Backbone.View.

***Solution:*** [React](http://facebook.github.io/react/) components should completely replace Backbone.View.  By including some simple mixins, [React](http://facebook.github.io/react/) components can become model-aware and provide as much or more integration expected with a Backbone.View.


Installation
==============
* Browser: include *react-backbone[.min].js* after the listed dependencies
* CommonJS: ```require('react-backbone')(require('react'), require('backbone'));```

Dependencies
--------------
* [React](http://facebook.github.io/react/)
* [Backbone](http://backbonejs.org/)
* [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager) (>= 0.5.0)
* [backbone-async-event](https://github.com/jhudson8/backbone-async-event) (optional)
* [react-events](https://github.com/jhudson8/react-events) (>= 0.2.0 optional)


Mixins
==============
The named mixins exists by including [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager).

See [examples](https://github.com/jhudson8/react-backbone/blob/master/test/test.js#L78)


modelAware
--------------
```
React.createClass({
  mixins: ['modelAware']
});
...
<MyClass ref="myClass" model={model} key="foo"/>
...
var model = this.refs.myClass.getModel();
```
Mixin that exposes getModel/setModel on the component.  The model can also be set by using the ```model``` property when constructing the component.


modelValueAware
--------------
```
React.createClass({
  mixins: ['modelValueAware']
});
...
<MyInputField ref="firstName" model={model}/>
...
this.refs.firstName.setModelValue('<NAME>');
```
Mixin that exposes getModelValue/setModelValue on the component.  By default it uses the ```key``` or ```ref``` property to get the model key.  While the example is not useful (as you should set the model directly), it is more useful for other mixins which would treat the component with only an awareness of the ```modelValueAware``` mixin (for example, the ```modelPopulate``` mixin).


modelPopulate
-------------
```
React.createClass({
  mixins: ['modelAware', 'modelPopulate'],
  render: function() {
    var model = this.getModel();

    // "Input" is some example component that uses the "modelValueAware" mixin to return the DOM value that is appropriate for the model
    return (
      <div>
        First Name: <Input ref="firstName" model={model}/>
        <br/>
        Last Name: <Input ref="lastName" model={model}/>
      </div>
    );
  },
  onSave: function() {
    // wiring for this method is not shown here

    // use this.refs automatically to get the components that will populate the model
    this.modelPopulate(function(model) {
      // assuming the model validation passed, this callback will be executed
    });

    // or for more control
    var attributes = this.modelPopulate();

    // or for even more control
    var attributes = this.modelPopulate(specificComponentsToCheck);
  }
});
```
Mixin that exposes a ```modelPopulate``` method which will iterate through a set of components and call ```setModelValue``` for each compoent and return the populated attributes hash.  The components are expected to be including the ```modelValueAware``` mixin.  In addition, a callback function can be provided (if the parent component includes the ```modelAware``` mixin) which will cause the attributes to be automatically set on the model and the callback function to be executed only if the validation passed on the model.

```modelPopulate(componentArray[, callback, setOptions])```
or
```modelPopulate(callback[, setOptions])```


modelEventAware
--------------
```
var MyClass React.createClass({
  mixins: ['modelEventAware'],
  getInitialState: function() {
    this.modelOn('change', this.onChange);
    return null;
  },
  onChange: function() { ... }
});
```
Exposes model event binding functions that will be cleaned up when the component is unmounted and not actually executed until the component
is mounted.
* ```modelOn(eventName, callback[, context])```;  similar to model.on.  the "context" used if not provided is the React component.
* ```modelOnce(eventName, callback[, context])```;  similar to model.once.  the "context" used if not provided is the React component.
* ```modelOff(eventName, callback[, context])```;  similar to model.off.  the "context" used if not provided is the React component.

***By including [react-events](https://github.com/jhudson8/react-events) you can use declarative bindings like the following:***
```
React.createClass({
  mixins: ['events', 'modelEventAware'],
  events: {
    'model:change': 'onChange',
    'model[foo]:change': 'onChange' // will bind to a specific model set as "foo" on this.props or this.refs
  },
  onChange: function() { ... }
});
```

modelIndexErrors
--------------
Mixin that exposes a ```modelIndexErrors``` method which returns model validation errors in a standard format.  This is meant to be overridden if a different format is desired.  to do so, use the mixin ```replace``` method using [react-mixin-manager](https://github.com/jhudson8/react-mixin-manager).  See ```modelInvalidAware``` for details on the expected response format.


modelValidator
--------------
Exposes a ```modelValidate(attributes, options)``` method which will call and return the model.validate method if it exists.
If not, undefined will be returned.  If errors are found, the ```modelIndexErrors``` mixin will be used to organize the error response.
{'fraction_non_alphanumeric': 0.1531349066572737, 'fraction_numerical': 0.0026417752729834447, 'mean_word_length': 4.166969972702457, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 23, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7330955', 'n_tokens_mistral': 3240, 'n_tokens_neox': 3119, 'n_words': 1117}