JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<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/1.8.0/backbone.marionette.min.js"></script>
<div id="content" class="content"></div>
<script type="text/template" id="list">
<%= name %>
</script>
JavaScript
svar data = [{
"name": "name1",
"city": "city1",
"age": "age1",
"subModel": [{
"name": "name01",
"city": "city01",
"age": "age01",
"subModel": [{
"name": "name001",
"city": "city001",
"age": "age001"
}]
}, {
"name": "name02",
"city": "city02",
"age": "age02",
"subModel": [{
"name": "name002",
"city": "city002",
"age": "age002"
}]
}, {
"name": "name03",
"city": "city03",
"age": "age03",
"subModel": [{
"name": "name003",
"city": "city003",
"age": "age003"
}]
}]
}];
// Define a collection
var col = Backbone.Collection.extend({});
var colInstance = new col();
colInstance.set(data);
var myApp = new Backbone.Marionette.Application();
myApp.addRegions({
mainRegion: "#content"
});
var myModel = Backbone.Model.extend({
defaults: {
"name": "no name",
"city": "chennai",
"age": "10 months"
}
});
var myCollection = Backbone.Collection.extend({
model: myModel
});
var oneView = Backbone.Marionette.ItemView.extend({
tagName: "li",
template: "#list"
});
var multiView = Backbone.Marionette.CollectionView.extend({
tagName: 'ul',
itemView: oneView
});
myApp.on('initialize:after', function () {
var listView = new multiView({
collection: colInstance
});
myApp.mainRegion.show(listView);
});
myApp.start();