React form with updated Mixin

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>

CSS

.field {
    margin: 6px 5px;
}

JavaScript 1.7

/** @jsx React.DOM */
var  ModelMixin = { 
    
  componentDidMount: function() {
    this.getBackboneModels().forEach(function(model) {
      model.on('add change remove', this.forceUpdate.bind(this, null), this);
    }, this);
  },

  componentWillUnmount: function() {
    this.getBackboneModels().forEach(function(model) {
      model.off(null, null, this);
    }, this);
  },
  
  handleOnKeyUp: function(event) {
      var target = event.nativeEvent.target,
          value = target.value.trim();
          
      // do we really need to force a re-render each time or not?
      // passing silent:true for now
      this.props.entry.set(target.name, value, {silent:true}); 
  },
  
  handleOnChange: function(event) {
      var target = event.nativeEvent.target,
          value = target.value;
      
      // do we really need to force a re-render each time or not?
      // passing silent:true for now
      if (target.type === 'checkbox') {
          value = target.checked;
      }
      
      this.props.entry.set(target.name, value, {silent: true}); 
  }
  
};

/* add validation method to model for text input fields */
var entryModel = Backbone.Model.extend({
  defaults: {
      type: 'breakfast',
      eaten: 'oatmeal',
      where: 'out',
      exercised: true,
      ate: 'quickly'
  }
});

var entry = new entryModel({type:'snack'});

var FJForm = React.createClass({
    mixins:[ModelMixin],
    getBackboneModels: function(){
        return [this.props.entry]
    },
    componentWillMount: function() {
        // update form with object or model passed in as a prop
    },
    getFormData: function() {
        var refs = this.refs,
            data = {
                type: refs.type.getDOMNode().value.trim(),
                where: refs.where.getDOMNode().value,
                eaten: refs.eaten.getDOMNode().value,
                exercised: refs.exercised.getDOMNode().checked,
                ate: refs.ate.getDOMNode().value
            };
        return data;
...