JSFiddle - React, Tailwind, and code Playground

by Saneesh K V

HTML

<div id="content"></div>


<script type="txt/template" id="link_template"><a href="<%= url %>"><%= name %></a> &gt;</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.0.2/backbone.marionette.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backgrid.js/0.3.5/backgrid.js"></script>

JavaScript

$(function(){
// Function to load the HTML template file    
function getTemplate(url) { 
    var data = "<h1> failed to load url : " + url + "</h1>";
    $.ajax({ 
        async: false, 
        contentType: 'text/html', 
        url: url, 
        success: function(response) { 
            data = response; 
        } 
    }); 
    return data; 
}
/*
<!-- Content of  gridArea.html -->

<div class="row-fluid">
	<div class="span10">
		<div class="hero-unit">
			<div id="example-1-result"></div>		  
		</div>
	</div>
</div>

*/  
    
    GridView = Backbone.View.extend({
        el: "#content",
        template: getTemplate('gridArea.html') ,
        initialize: function() {
            // Initialize a new BackGrid library instance
            var grid = new Backgrid.Grid({
                columns: columns,
                collection: territories // Please refer: http://backgridjs.com/index.html#basic-example
            });
            
            console.log(grid.render().el); // Logs the generated territories HTML table 
            
            this.$el.append(_.template(this.template));
            this.$el.find("#example-1-result").append(grid.render().el);
            
            //Even this is not working
            this.$el.find("#example-1-result").html('Sample text');
        }
    });

/*
Expected result is:
<div id="content">
     <div class="row-fluid">
        <div class="span10">
            <div class="hero-unit">
                <div id="example-1-result">
                    <table class="backgrid"></table>
                </div>		  
            </div>
        </div>
    </div>
</div>

*/    
    
});