JSFiddle - React, Tailwind, and code Playground

by niki4810

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://rawgithub.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="https://rawgithub.com/derickbailey/backbone.marionette/master/lib/backbone.marionette.js"></script>
<script src="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/nightly/jquery.qtip.css">
<script id="my-recent-searches" type="text/template">
    <tr>
        <td class="span2"><%= configName%></td>
        <td class="span6"><%=searchTerms%></td>
        <td class="span2"><%=dateTime%></td>
            </tr>
</script>
            
            <button id="addRow">Add new Row</button>
            
            <button id="removeRow">Remove Row </button>
            <button id="showList">Show List</button>
            <hr/>

JavaScript

$(function () {
    var RecentSearchModel = Backbone.Model.extend();
    var RecentSearchCollection = Backbone.Collection.extend({
        model: RecentSearchModel
    });

    var RecentSearchItem = Backbone.Marionette.ItemView.extend({
        template: "#my-recent-searches"
    });

    var RecentSearchCollectionView = Backbone.Marionette.CollectionView.extend({
        tagName: "table",
        className: "table",
        itemView: RecentSearchItem,
        onClose : function(){
            console.log("view closed");
        }
        
    });

    var mySearches = new RecentSearchCollection();
    var mySearch1 = new RecentSearchModel({
        configName: "foo",
        searchTerms: "foo:foo; bar:bar",
        dateTime: new Date().getDate()
    });
    var mySearch2 = new RecentSearchModel({
        configName: "foo2",
        searchTerms: "foo:foo2; bar:bar2",
        dateTime: new Date().getDate()
    });
    var mySearch3 = new RecentSearchModel({
        configName: "foo3",
        searchTerms: "foo:foo3; bar:bar3",
        dateTime: new Date().getDate()
    });

    mySearches.add(mySearch1);
    mySearches.add(mySearch2);
    mySearches.add(mySearch3);



    $("#addRow").click(function () {
        if(mySearches.length === 5){
            mySearches.shift();
            console.log(mySearches.length);
        }
        var mySearch123 = new RecentSearchModel({
            configName: "foo"+ Math.floor(Math.random() * 6) + 1,
            searchTerms: "foo:foo;"+ "bar:bar",
            dateTime: new Date().getDate()
        });

        mySearches.push(mySearch123);
    });
    
    $("#removeRow").click(function(){
        mySearches.remove( mySearches.pop());
    });
    
    $("#showList").click(function(e){
            var mySearchCollectionView = new RecentSearchCollectionView({
        collection: mySearches
    });
        var myView = mySearchCollectionView.render();
        console.log(myView);
       var myTip =  $(e.currentTarget).qtip({
  ...