JSFiddle - React, Tailwind, and code Playground

by hoffmanc

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="https://raw.github.com/PaulUithol/Backbone-relational/master/backbone-relational.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.marionette/master/src/backbone.marionette.js"></script>
<html>
    <body>
        <section id='main'>
<h2>
    Tool Requests
</h2>

<div id='content'></div>
        </section>
</body>
</html>

<script type='text/template' id="tool_category-template">
    <h3>{{Name}}</h3>
    <table class='tool_requests'>
        <thead>
            <tr class='header'>
                <th>Tool</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</script>

<script type='text/template' id="tool_request-template">
    <td>{{Tool}}</td>
</script>

</html>

CSS

/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background-color: #5c87b2;
    font-size: .85em;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #fff;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}

#main {
    padding: 30px 30px 15px 30px;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}

footer, 
#footer {
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height:...

JavaScript

// customizations
// http://derickbailey.github.com/backbone.marionette/#backbone-marionette-renderer/caching-pre-compiled-templates
Backbone.Marionette.TemplateCache.loadTemplate = function(template, callback){
  // pre-compile the template and store that in the cache.
  var compiledTemplate = Handlebars.compile($(template).html());
  callback.call(this, compiledTemplate);
};

Backbone.Marionette.Renderer.renderTemplate = function(template, data){
  // because `template` is the pre-compiled template object,
  // we only need to execute the template with the data
  return template(data);
}

// app
ToolTrackerApp = new Backbone.Marionette.Application();

ToolTrackerApp.addRegions({
    mainRegion: "#content"
});

ToolTrackerApp.addInitializer(function(options) {
    var toolCategoriesView = new ToolCategoriesView({
        collection: options.toolCategories
    });

    ToolTrackerApp.mainRegion.show(toolCategoriesView);
});

// models
ToolCategory = Backbone.RelationalModel.extend({
    defaults: {
        Id: null,
        Name: "",
    },
    relations: [{
        type: Backbone.HasMany,
        key: "toolRequests",
        relatedModel: "ToolRequest"
    }]
});

ToolRequest = Backbone.RelationalModel.extend({
    defaults: {
        Id: null,
        Tool: "",
        Description: null,
        OwnerEmail: null
    }
});

// collections
ToolCategories = Backbone.Collection.extend({
    model: ToolCategory
});

ToolRequests = Backbone.Collection.extend({
    model: ToolRequest,
    reorderRequests: function(id, newPos) {
        var req = this.filter(function(tr) { tr.get('Id') === id });
        this.remove(req);
        this.add(req, {at: newPos});                                            
    }
});

// views
ToolRequestView = Backbone.Marionette.ItemView.extend({
    template: "#tool_request-template",
    tagName: "tr",
    className: "tool_request",
    onRender: function() {
        this.$el.attr('data-id',this.model.get('Id'));
   ...