1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html>
	<head>
		<title>Testing</title>
	
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="js/underscore.js"></script>
		<script src="js/backbone.js"></script>
		<script src="js/marionette.js"></script>
		
		<script>
			App = new Backbone.Marionette.Application();
			App.addRegions({
				'nav': '#nav',
				'content': '#content'
			});
			
			var NavigationLayout = Backbone.Marionette.Layout.extend({
				template: '#nav-template',
				regions: {
					'breadcrumbs': '#breadcrumbs',
					'options': '#options'
				}
			});
			
			var BreadcrumbsView = Backbone.Marionette.ItemView.extend({
				template: '#breadcrumbs-template'
			});
			
			var OptionsView = Backbone.Marionette.ItemView.extend({
				template: '#options-template'
			});
			
			var ContentView = Backbone.Marionette.ItemView.extend({
				template: '#content-template'
			});
			
			App.addInitializer(function(options) {
				var navigationLayout = new NavigationLayout();
				
				App.nav.show(navigationLayout);
				App.content.show(new ContentView());
				
				navigationLayout.breadcrumbs.show(new BreadcrumbsView());
				navigationLayout.options.show(new OptionsView());
			});
			
			$(function() {
				App.start();
			});
			
		</script>
	
		<script type="text/template" id="nav-template">
			This is nav-template
			<div id="breadcrumbs"></div>
			<div id="options"></div>
		</script>
		
		<script type="text/template" id="breadcrumbs-template">
			This is breadcrumbs-template
		</script>
		
		<script type="text/template" id="options-template">
			This is options-template
		</script>
		
		<script type="text/template" id="content-template">
			This is content-template
		</script>
			
	
	</head>
	<body>
		
		<div id="main">
			<div id="nav">
				Navigate
			</div>
			<div id="content">
				Content
			</div>
				
		</div>
		
	</body>
</head>