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>
<script src="https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min.js"></script>
<div id="house">
    <input id="height" type="number" class="prop">
    <input id="width" type="number" class="prop">
    <input id="length" type="number" class="prop">
    <span id="color" class="prop"></span>
</div>

CSS

.prop {
    display: block;
    margin: 5px;
}

.is-blue {
    color: blue
}

JavaScript

var house = new (Backbone.Model.extend({
    localStorage: new Backbone.LocalStorage("house")
}))({id:1,height:0, width:0, length:0, color:'green'});

console.log(house,'house');

house.on('change', function() {
    console.log('house changes: ', house.changedAttributes(), house.attributes);
});

var houseView = new (Backbone.View.extend({
    bindings: {
        '#height': 'height',
        '#width': 'width',
        '#length': 'length',
        '#color': {
            modelAttr: 'color',
            attributes: [{
                name: 'class',
                observe: 'color',
                format: function(val, attr) { 
                    return val == 'blue' ? 'is-blue' : '';
                }
            }]
        }
    },
    render: function() {
        this.setElement(document.getElementById('house'));
        this.stickit(house);
    }
}))();


houseView.render();
house.set({color:'red', width:115});
house.save();
house.fetch({
    success: function(){
        house.set({color:'blue', height:200, length:4});
    }
});