JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://dl.dropbox.com/u/65238578/vendor/underscore-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/65238578/vendor/backbone-min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/65238578/vendor/mustache.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/65238578/vendor/model.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
<a href="#" id="addAll">Button</a>
<div class="content-central">
<div class="box2">
</div>
</div>
<div class="templates" style="visibility:hidden;">
<div data-template-name="central-home">
<div data-template-name="">
hola
<div id="grid"></div>
</div>
</div>
</div>
CSS
* {
font-family: Verdana, sans-serif;
font-size: 12px;
}
JavaScript
$(function () {
var ContentModel = Backbone.Model.extend();
var ContentCollection = Backbone.Collection.extend({
model: ContentModel
});
var tabsContents = Backbone.View.extend({
el: "body",
events: {
"click #addAll": "addContentAll"
},
initialize: function() {
_.bindAll(this);
this.model = new ContentCollection();
this.model.on("add", this.contentAdded);
},
addContentAll: function(event) {
try {
var Data = {idJS: "histo004get", yearHisto: this.yearHist};
var content = new ContentModel({modelName: "all" , controlData: Data});
var Data2 = {idJS: "histo004get", yearHisto: this.yearHistCompare};
var content2 = new ContentModel({modelName: "none" , controlData: Data2});
this.model.add(content);
content.dataToSend = content.get('controlData');
content2.dataToSend = content2.get('controlData');
GridsKendo();
} catch (error) {console.log(error.message);}
},
contentAdded: function(content) {
if (content.view == null) {
var template_name ='';
switch(content.get("modelName")){
case 'all': template_name = 'central-home'; break;
default: return false;
}
content.view = new ContentView({model: content,template: $.trim($("[data-template-name='"+ template_name +"'] div").html() || "Template not found!")});
$(".box2").empty();
this.$el.find(".content-central").find("div.box2").append(content.view.render().el);
}
}
});
var ContentView = Backbone.View.extend({
tagName: "div",
template: null,
initialize: function() {
_.bindAll(this);
this.template = this.options.template;
},
render: function() {
this.$el.html(Mustache.render(this.template, this.model.toJSON()));
return this;
}
});
var tabsview = new tabsContents();
});
function GridsKendo(){
kendo.destroy(document.body);
var grid = $("#grid").kendoGrid({
dataSource: {
data:...