Backbone.js Example

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/template" id="woTemplate">
    <td><%= wonum %></td><td><%= part %></td><td><%= desc %></td><td><input type="text" class="woComment" value="<%= comment %>"></td>
        </script>
        <script type="text/template" id="sectionTemplate">
            <h1><%= name %></h1>
                <hr>
                <table class="section tablesorter" cellspacing="1">
                    <thead>
                        <tr><th>WO</th><th>Part</th><th>Desc</th><th>Comments</th></tr>
                    </thead>
                    <tbody id="tbody<%=id%>"><%= woData %></tbody>
                        </table>
                        </script>

CSS

table.section {
    width: 100%;
}
table.section th {
    text-align: left;
}
section.section h1 {
    margin-bottom: 0px;
    font-size: 1.2em;
}

JavaScript

// ---------------------------------------------------------- Work Order
window.WO = Backbone.Model.extend({
default:
    {
        wonum: null,
        part: null,
        desc: null,
        comment: null,
        order: null,
        section: null
    }, url: "/rest/wo/"
});
window.WOView = Backbone.View.extend({
    tagName: "tr",
    className: "wo",
    initialize: function(options) {
        _.bindAll(this, 'render');
    },
    render: function() {
        $(this.el).html(this.woTemplate(this.model.toJSON()));
        return this;
    },
    woTemplate: _.template($('#woTemplate').html())
});
// ------------------------------------------------------------- Section 
window.SectionC = Backbone.Collection.extend();
window.Section = Backbone.Model.extend({
    defaults: {
        id: null,
        name: null
    },
    url: "/rest/section",
    woc: null,
    initialize: function() {
        this.woc = new window.SectionC(null, {
            model: window.WO
        });
    },
    add: function(woObj) {
        woObj.set({
            id: woObj.get('wonum')
        });
        this.woc.add(woObj);
    }
});

window.SectionView = Backbone.View.extend({
    tagName: "section",
    className: "section",
    views: [],
    initialize: function() {
        _(this).bindAll('add', 'render');
    },
    sectionTemplate: _.template($('#sectionTemplate').html()),
    render: function() {
        this._rendered = true;
        var that = this;
        $(this.el).empty();
        $(this.el).attr('id', "sec" + this.model.get('id'));
        var woData = "";
        if (this.model.woc.length > 0) _(this.views).each(function(woV) {
            woData += $(woV.render().el).html();
        });
        $(this.el).html(this.sectionTemplate({
            woData: woData,
            id: this.model.get('id'),
            name: this.model.get('name')
        }));
        return this;
    },
    add: function(woObj) {
        woObj.set({
            section: this.model.id,
         ...