Backbone Models / React

Testing this all out

by dfederighi

HTML

<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
<script src="http://fb.me/react-with-addons-0.5.1.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */
var  ModelMixin = { 
    
  componentDidMount: function() {
    // Whenever there may be a change in the Backbone data, trigger a reconcile.
    this.getBackboneModels().forEach(function(model) {
      model.on('add change remove', this.forceUpdate.bind(this, null), this);
    }, this);
  },

  componentWillUnmount: function() {
    // Ensure that we clean up any dangling references when the component is
    // destroyed.
    this.getBackboneModels().forEach(function(model) {
      model.off(null, null, this);
    }, this);
  },
    
  handleOnChange: function(event) {
      // do we really need to force a re-render each time or not?
      // passing silent:true for now
      this.props.entry.set('eaten', event.nativeEvent.target.value, {silent: true}); 
  },
  
  handleSubmit: function(event) {
      event.preventDefault();
      
      console.log(this.props.entry.toJSON());
  },
  
  bindTo: function(model, key){
      return {
          value: model.get(key),
          requestChange: function(value){
              model.set(key, value);
          }.bind(this)
      }
   }  
}

var entryModel = Backbone.Model.extend({
  defaults: {
      type: 'breakfast',
      eaten: ''
  }
});

var entry = new entryModel({type: 'breakfast',eaten:'oatmeal'});

var FJForm = React.createClass({
    mixins:[ModelMixin],
    getBackboneModels: function(){
        return [this.props.entry]
    },
    render: function() {
        console.log('entry:', this.props.entry.toJSON());
        return <form onSubmit={this.handleSubmit}><div>
            <div>Hello {this.props.entry.get('type')}</div>
            <input type="text" name="type" defaultValue={this.props.entry.get('eaten')} onKeyUp={this.handleOnChange} /> 
        </div></form>;
    }
});
                                              
React.renderComponent(<FJForm entry={entry} />, document.body);