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: