JSFiddle - React, Tailwind, and code Playground
HTML
<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>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="content"></div>
<script type="text/template" id="angry_cats-template">
<div>how I should be out of table</div>
<table class="table-striped table-bordered">
<thead>
<tr class='header'><th>Name</th></tr>
</thead>
<tbody></tbody>
</table>
</script>
<script type="text/template" id="angry_cat-template">
<td><%= name %></td>
</script>
JavaScript
myApp = new Backbone.Marionette.Application();
myApp.addRegions({
mainRegion:"#content"
});
AngryCat = Backbone.Model.extend({});
AngryCats = Backbone.Collection.extend({
model:AngryCat
});
AngryCatView = Backbone.Marionette.ItemView.extend({
template:"#angry_cat-template",
tagName:'tr',
className:'angry_cat'
});
AngryCatsView = Backbone.Marionette.CompositeView.extend({
id:"angry_cats",
template: "#angry_cats-template",
itemView: AngryCatView,
itemViewContainer: "tbody"
});
myApp.addInitializer(function(options){
var cats = new AngryCats([
{ name: 'Wet Cat' },
{ name: 'Bitey Cat' },
{ name: 'Surprised Cat' }
]);
var angryCatsView = new AngryCatsView({
collection: cats
});
myApp.mainRegion.show(angryCatsView);
});
myApp.start();