Dynamic Tabs Layout

layout.js

var TabOneContentView = Marionette.LayoutView.extend({
	template: '#viewOne'
});

var TabTwoContentView = Marionette.LayoutView.extend({
	template: '#viewTwo'
});

var TabItemView = Marionette.ItemView.extend({
	template: '#itemView',
	triggers:{
		'click': 'show:tab:content'
	}
});

var TabListView = Marionette.CollectionView.extend({
	childView: TabItemView
});

var MainLayoutView = Marionette.LayoutView.extend({
	el: '#layout',
  template: false,
	regions:{
		tabs: '#tabs',
		content: '#content'
	},
	onRender(){
		this.showChildView('tabs', new TabListView({
			collection: this.collection
		}));
	},
	onChildviewShowTabContent(childview, args){
  	var viewFn = childview.model.get('view');
		this.showChildView('content', new viewFn());	
	}
});

var tabsCollection = new Backbone.Collection([
  new Backbone.Model({
    title: 'Tab 1',
    view: TabOneContentView
  }),
  new Backbone.Model({
    title: 'Tab 2',
    view: TabTwoContentView
  })
]);
var layout = new MainLayoutView({
	collection: tabsCollection
});
layout.render();

templates.html

<div id="layout">
  <div id="tabs"></div>
  <div id="content"></div>
</div>
<script type="text/template" id="viewOne">View One</script>
<script type="text/template" id="viewTwo">View Two</script>
<script type="text/template" id="itemView">
	<%= title %>
 </script>