JSFiddle - React, Tailwind, and code Playground

by nilgundag

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<header>
<div class="jumbotron">
  <div class="container">
    <h1>My tables!</h1>
  </div>
</div>
</header>
<content>
    <div id="add-table">
      <div class="container">
        <label>Add new table!</label>
        <form>
            <legend>Name</legend>
            <div class="input-group">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
                <input type="text" class="form-control">
            </div>
        </form>
      </div>
    </div>
    <div id="content"></div>
</content>
    
<script id="allTableTemlate" type="text/template">
<li><%= name %></li>
</script>

JavaScript

(function() {
    window.App = {
        Models: {},
        Collections: {},
        Views: {},
        Router: {}
    };
    window.vent = _.extend({}, Backbone.Events);
    window.template = function(id) {
        return _.template( $('#' + id).html() );
    };
})();

// !models.js

App.Models.Table = Backbone.Model.extend({});

// !collections.js

App.Collections.Tables = Backbone.Collection.extend({
    
    model: App.Models.Table,
    url: 'tables.json',
    init : function(){
         var self = this;
         var initArray = [
            {"name": "Table 1","stts": "redstts","id": 1},
            {"name": "Table 2","stts": "redstts","id": 2},
            {"name": "Table 3","stts": "redstts","id": 3},
            {"name": "Table 4","stts": "redstts","id": 4},
            {"name": "Table 5","stts": "redstts","id": 5}
        ];
    
        _.each(initArray,function(item){
            self.push(new App.Models.Table(item));
        });
        console.log(self.models.length);
        console.log(App.tables.models.length);
        
    }
});

// !views.js

App.Views.App = Backbone.View.extend({
    initialize: function() {
        console.log("4-");
        var allTablesView = new App.Views.Tables({ collection: App.tables }).render();
         console.log("6-");
        $(document.body).append(allTablesView.el);
         console.log("7-");
    }
});
App.Views.Tables = Backbone.View.extend({
    tagName: 'ul',
    initialize : function(options) {
	},
    render: function() {
      this.collection.each( this.addOne, this );
      return this;
    },
    addOne: function(table) {
        var tableView = new App.Views.Table({ model: table });
        this.$el.append(tableView.render().el);
    },    
});
App.Views.Table = Backbone.View.extend({
    tagName: 'li',
    template: template('allTableTemlate'),
    render: function() {
          this.$el.html( this.template( this.model.toJSON() ) );
      return this;
    },
});

// !router.js

App.Router =...