JSFiddle - React, Tailwind, and code Playground

by knunery

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="name_container" class='liveExample'>    
</div>

<script type="text/template" id="name_template">
    <p>First name: <input data-bind="firstName" value="<%= firstName %>" /></p> 
    <p>Last name: <input data-bind="lastName" value="<%= lastName %>" /></p> 
    <h2>Hello, <%= firstName %> <%= lastName %>!</h2>
</script>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

var NameModel = Backbone.Model.extend({defaults: {firstName:'Planet', lastName:'Earth'} });

var NameView = Backbone.View.extend({
    template: _.template($('#name_template').html()),
    render: function() {        
        this.$el.html( this.template( this.model.toJSON() ) );               
    },
    events: {
        "change input" : "updateModel" 
    },
    updateModel : function(evt){
        var target = $(evt.currentTarget),
        data = {};
        data[target.data('bind')] = target.attr('value');
        this.model.set(data);
        this.render();
    }
});

var nameModel = new NameModel();
var nameView = new NameView({model: nameModel});
nameView.render();
$('#name_container').html(nameView.el);