JSFiddle - React, Tailwind, and code Playground

by fguillen

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="view-goes-here"><input id="size" value="big" /></div>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}

JavaScript

var V = Backbone.View.extend({
    events: {
        'change input': 'changeColor'
    },
    initialize: function() {
        this.colorInput = $("<input />", {
            "id": "color",
            "name": "color",
            "value": '11'
        });
    },
    render: function() {
        this.$el.append(this.colorInput);
        this.delegateEvents();
        return this;
    },
    changeColor: function() {
        console.log(this.colorInput.val());
    }
});

var v = new V;
$('#view-goes-here').append(v.render().el);

v.colorInput.val( "other1" );
v.colorInput.val( "other2" );