Simple Backbone/Marionette Example With Nested Views

Here is the Javascript file:

/* create a new instance of the Marionette app */
var app = new Backbone.Marionette.Application();

/* add the initial region which will contain the app */
app.addRegions({
	/* reference to container element in the HTML file */
	appRegion: '#AppBase'
});

/* define a module to keep the code modular */
app.module('App',function(module, App, Backbone, Marionette, $, _){
	
	module.RegionOneLayoutView = Marionette.LayoutView.extend({
		
		/* specify element type of auto-generated container element */
		tagName: 'div',

		/* add ID attribute to the generated element */
		id: 'regionOneLayoutView',

		/* add class name to the generated element */
		template: '#layout-region-one',

		/* HTML template for this view */
		className: 'subLayout',
		initialize: function(){console.log('Region 1 Layout: initialize');},
		onRender: function(){console.log('Region 1 Layout: onRender');},
		onShow: function(){console.log('Region 1 Layout: onShow');}
	});

	module.RegionTwoLayoutView = Marionette.Layout.extend({
		
		/* specify element type of auto-generated container element */
		tagName: 'div',

		/* add ID attribute to the generated element */
		id: 'regionTwoLayoutView',

		/* add class name to the generated element */
		className: 'subLayout',

		/* HTML template for this view */
		template: '#layout-region-two',

		/* define UI events and assign event handlers */
		events: {
			'click .button1' : 'onButtonOneClicked',
			'click .button2' : 'onButtonTwoClicked',
			'click .button3' : 'onButtonThreeClicked'
		},

		/* click handlers for buttons */
		onButtonOneClicked: function(mouseEvent) {
			console.log('button one clicked');
		},
		onButtonTwoClicked: function(mouseEvent) {
			console.log('button two clicked');
		},
		onButtonThreeClicked: function(mouseEvent) {
			console.log('button three clicked');
		},
		initialize: function(){console.log('Region 2 Layout: initialize');},
		onRender: function(){console.log('Region 2 Layout: onRender');},
		onShow: function(){console.log('Region 2 Layout: onShow');}
	});

	/* define a view; in this case a 'Layout' */
	module.AppLayoutView = Marionette.Layout.extend({
		
		/* the auto-generated element which contains this view */
		tagName: 'div',

		/* id attribute for the auto-generated container element */
		id: 'AppContainer',

		/* reference to the template which will be rendered for this view */
		template: '#layout-template',

		/* define the regions within this layout, into which we will load additional views */
		regions: {
			'RegionOne' : '#regionOne',
			'RegionTwo' : '#regionTwo'
		},

		/* called when the view initializes, before it displays */
		initialize: function() {
			console.log('main layout: initialize');
		},

		/* called when view renders in the DOM. This is a good place to 
			add nested views, because the views need existing DOM elements
			into which to be rendered. */
		onRender: function() {
			console.log('main layout: onRender');
			/* create new instance of the region 1 layout view, and display it in Region1  */
			var regionOneLayoutView = new module.RegionOneLayoutView();
			this.RegionOne.show(regionOneLayoutView);

			/* create new instance of the region 2 layout view, and display it in Region2  */
			var regionTwoLayoutView = new module.RegionTwoLayoutView();
			this.RegionTwo.show(regionTwoLayoutView);
		},

		/* called when the view displays in the UI */
		onShow: function() {
			console.log('main layout: onShow');
		}
	});

	/* Tell the module what to do when it is done loading */
	module.addInitializer(function(){
		/* create a new instance of the layout from the module */
		var layout = new module.AppLayoutView();

		/* display the layout in the region defined at the top of this file */
		app.appRegion.show(layout);
	});
});

/* once the DOM initializes, start the app */
$(document).ready(function() {app.start();});

And here is the HTML document:

<!doctype html>
<html>
	<head>
		<title>Backbone/Marionette basic setup with nested views</title>
		<style type="text/css">
			body {
				background: #ffffff;
			}
			#AppBase {
				width: 100%;
				max-width: 960px;
				height: 480px;
				margin: 10px auto;
				padding: 0;
				float: left;
				outline: 1px solid #808080;
			}

			#AppContainer {
				margin: 0;
				padding: 0;
			}

			h1 {
				float:left;
				width:100%;
				margin:0;
				padding:0;
				text-align: center;
				height:100%;
			}
			.subLayout {
				float:left;
				width: 50%;
				height:200px;
				outline:1px solid #808080;
			}
			h2 {
				width:100%;
				text-align:center;
			}
			button {
				width: 75px;
				line-height:30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- Base element for app -->
		<!--
			Dont use the BODY element as the base because when the app renders in the BODY
			it will wipe out the template files before the views can pick them up 
		-->
		<div id="AppBase"></div>

		<!-- TEMPLATES -->
		<!-- main layout template -->
		<script type="text/template" id="layout-template">
			<h1>Main Template</h1>
			<div id="regionOne"></div>
			<div id="regionTwo"></div>
		</script>

		<!-- region 1 layout -->
		<script type="text/template" id="layout-region-one">
			<h2>Region 1 content</h2>
		</script>

		<!-- region 2 layout -->
		<script type="text/template" id="layout-region-two">
			<h2>Region 2 content</h2>
			<p>
				<button class="button1">One</button>
				<button class="button2">Two</button>
				<button class="button3">Three</button>
			</p>
		</script>
		<!-- libraries -->
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="js/underscore.js"></script>
		<script type="text/javascript" src="js/backbone.js"></script>
		<script type="text/javascript" src="js/backbone.marionette.js"></script>

		<!-- app code -->
		<script type="text/javascript" src="js/script.js"></script>
	</body>
</html>

Links to necessary code libraries: