JSFiddle - React, Tailwind, and code Playground

by zaphod013

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div id="main-region"></div>

<script id="food-table" type="text/template">
        <thead id="column-id">
        </thead>
        <tbody id="row-id">
        </tbody>
</script>

<script id="food-col-item" type="text/template">
    <th><%= col %></th>
</script>

<script id="food-row-item" type="text/template">
    <td><%= row %></td>
</script>

JavaScript

FoodManager = new Backbone.Marionette.Application();

FoodManager.FoodLayout = Backbone.Marionette.Layout.extend({
  template: "#food-table",

  regions: {
    colRegion:"#column-id",
    rowRegion:"#row-id"
  }
});

FoodManager.addRegions({
    mainRegion: "#main-region",

});

FoodManager.Col = Backbone.Model.extend({});

FoodManager.ColCollection = Backbone.Collection.extend({
                                        model: FoodManager.Col
                                    });

FoodManager.Row = Backbone.Model.extend({});

FoodManager.RowCollection = Backbone.Collection.extend({
                                        model: FoodManager.Row
                                    });

FoodManager.ColItemView = Marionette.ItemView.extend({
    template: "#food-col-item",
    tagName: "th",
});

FoodManager.ColView = Marionette.CompositeView.extend({
    template: "#food-table",
    tagName: "thead",
    itemView: FoodManager.ColItemView
});

FoodManager.RowItemView = Marionette.ItemView.extend({
    template: "#food-row-item",
    tagName: "th",
});

FoodManager.RowView = Marionette.CompositeView.extend({
    template: "#food-table",
    tagName: "table",
    itemView: FoodManager.RowItemView
});

FoodManager.on("initialize:after", function(){
    var columns = new FoodManager.ColCollection([
                        {col: 'Breakfast'},
                        {col: 'Lunch'},
                        {col: 'Dinner'}
                ]);
    var rows = new FoodManager.RowCollection([
                        {row: 'Carbs'},
                        {row: 'Protein'},
                        {row: 'Fats'}
                ]);
    var colListView = new FoodManager.ColView({
                                collection: columns
                            });
    var rowListView = new FoodManager.RowView({
                                collection: rows
                            });
    
    var foodLayout = new FoodManager.FoodLayout();    
    foodLayout.render();
   ...