JSFiddle - React, Tailwind, and code Playground

by erick

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<form id="person">
    <input name="email" type="email" class="span12" required />
    <div id="email-sync" class="span12"></div>
    
    <span class="span12">Number of model bindings:</span>
    <span id="nModelBindings" class="span12"></span>
</form>

CSS

.span12 {
    height: 20px;
    width: 200px;
    padding: 4px;
    font-size: 14px;
    margin: 10px;
}

JavaScript

var person = new (Backbone.Model)({email:''});

new (Backbone.View.extend({
    initialize: function() {
        this.setElement($('#person'));
        person.on('change', this.render, this);
    },
    bindings: {
        'input[name=email]': 'email',
        '#email-sync': 'email'
    },    
    render: function() {
        console.log('rendering');
        this.stickit(person);
        this.$('#nModelBindings')
            .text(this._modelBindings.length);
        return this;            
    }
}))().render();