JSFiddle - React, Tailwind, and code Playground

by Eric Howe

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"></div>
<script type="text/template" id="Person-Template">
    <% if(fname) { %><span class="fname" title="FirstName">F: <%= fname %></span><% } %>
    <% if(lname) { %><span class="lname" title="LastName">L: <%= lname %></span><%  } %>
    <% if(age)   { %><span class="age" title="Age">A: <%= age %></span><%           } %>
</script>
<button id="add">Add First Name</button>
<button id="rm">Remove First Name</button>

CSS

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

JavaScript

var PersonModel = Backbone.Model.extend({
    defaults: {
        fname: undefined,
        lname: undefined,
        age: undefined
    }
});

var PersonView = Backbone.View.extend({
    tagName: 'div',

    initialize: function() {
        _.bindAll(this, 'render');
        this.model.on("change", this.render);
    },

    render: function() {
        var values   = this.model.toJSON();
        var template = $('#Person-Template').html();
        this.$el.html(_.template(template, values));
        return this;
    }
});

var m = new PersonModel;
var v = new PersonView({ model: m });
$('#view-goes-here').append(v.render().el);

$('#add').click(function() {
    m.set({ fname: 'First Name' });
});
$('#rm').click(function() {
    m.set({ fname: undefined });
});