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">
    <span class="fname" title="FirstName">F: <%= fname %></span>
    <span class="lname" title="LastName">L: <%= lname %></span>
    <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;
}
span.fname,
span.lname,
span.age {
    display: none; 
}

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));
        _(values).each(function(v, k) {
            var m = _(v).isUndefined() ? 'hide' : 'show';
            this.$('.' + k)[m]();
        }, this);
        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 });
});