JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.validation/0.9.1/backbone-validation.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.invalid {
    border: 1px solid red;
}

.valid {
    border: 1px solid green;
}

JavaScript 1.7

/** @jsx React.DOM */

_.extend(Backbone.Model.prototype, Backbone.Validation.mixin);

var MyModel = Backbone.Model.extend({
    validation: {
        cash: {
            min: 0
        }
    }
});

var myModel = new MyModel({});

var Input = React.createClass({
    propTypes: {
        model: React.PropTypes.instanceOf(Backbone.Model),
        attribute: React.PropTypes.string
    },

    modelValue: function () {
        return this.props.model.get(this.props.attribute);
    },

    validates: function (potentialValue) {
        return this.props.model.preValidate(this.props.attribute, potentialValue);
    },

    getInitialState: function() {
        var modelValue = this.modelValue();
        return {
            value: modelValue,
            valid: this.validates(modelValue)
        };
    },

    handleChange: function (e) {
        var value = e.target.value;
        this.setState({
            value: value,
            valid: this.validates(value)
        });
    },

    render: function () {
        var value = this.state.value;
        var validationError = this.state.valid;
        
        return <input className={validationError ? 'invalid': 'valid'} type="text" value={value} onChange={this.handleChange} />
    }

});

React.renderComponent(<Input model={myModel} attribute="cash" />, document.body);