Skip to content

Ecce Signum

Immanentize the Empathy

  • Home
  • About Me
  • Published Works and Literary Matters
  • Indexes
  • Laboratory
  • RSS Feed

Barebones Backbone/Marionette File

2014-01-28 John Winkelman

I am posting this for two reasons: First, so that I have an easy place to go when I want to start a new Backbone/Marionette application and I don’t want to search around for a bare-bones template; and second, because when I started working with Backbone/Marionette I wish I could have found something like this; the equivalent of ‘Hello World’. Code follows, with comments therein.

/* 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, $, _){
	
	/* define a view; in this case a 'Layout' */
	module.GardenLayoutView = Marionette.LayoutView.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',

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

		/* called when view renders in the DOM */
		onRender: function() {
			console.log('onRender');
		},

		/* called when the view displays in the UI */
		onShow: function() {
			console.log('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.GardenLayoutView();

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


$(document).ready(function() {app.start();});

And here is the base HTML file, including references to all of the libraries which are required for creating a Backbone/Marionette application.

<!doctype html>
<html>
	<head>
		<title>Backbone/Marionette bare-bones setup</title>
		<link rel="stylesheet" href="style.css"/>
	</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>This is a rendered template</h1>
		</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>

The libraries which load in before the code for the script can be found here:

  • jQuery
  • Underscore.js
  • Backbone
  • Marionette

Each link also has information necessary for learning and implementing the libraries.

Posted in Programming

Post navigation

A Collection of Links Concerning Jim Harrison
Lake Michigan, Mid-January 2014

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Personal website of
John Winkelman

John Winkelman in a diner in San Francisco

Archives

Categories

Posts By Month

January 2014
S M T W T F S
 1234
567891011
12131415161718
19202122232425
262728293031  
« Dec   Feb »

Links of Note

Reading, Writing
Tor.com
Locus Online
The Believer
File 770
IWSG

Watching, Listening
Writing Excuses Podcast
Our Opinions Are Correct

News, Politics, Economics
Naked Capitalism
Crooked Timber

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

© 2023 Ecce Signum

Proudly powered by WordPress | Theme: x-blog by wpthemespace.com