Skip directly to content

More On Using Google Spreadsheets and Backbone/Marionette

on Sun, 04/06/2014 - 10:31

Pulling data from a published Google Spreadsheet it actually quite simple. All you need is a spreadsheet which you have "published to web"; i.e. made visible (but not editable) to the public. Backbone models have no difficulty pulling the data in, but the structure is complex, and requires a little explanation.

First, here is what the spreadsheet looks like:

Name per square foot height
arugula 9 9
basil 4 9
beets 9 6
carrots 16 4
collard greens 2 16
cauliflower 1 18
tomatoes 1 36
broccoli 1 24
mustard greens 9 12
peppers 1 18
chard 4 12
kale 2 12
radish 36 8
brussels sprouts 1 24
okra 1 24
eggplant 1 24
celery 4 18

I am pulling in a representational JSON feed from Google Drive. The data (trimmed to the first two rows) looks something like this:

{
	"version": "1.0",
	"encoding": "UTF-8",
	"feed": {
		"xmlns": "http://www.w3.org/2005/Atom",
		"xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
		"xmlns$gsx": "http://schemas.google.com/spreadsheets/2006/extended",
		"id": {
			"$t": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values"
		},
		"updated": {
			"$t": "2014-01-22T19:27:16.240Z"
		},
		"category": [
			{
				"scheme": "http://schemas.google.com/spreadsheets/2006",
				"term": "http://schemas.google.com/spreadsheets/2006#list"
			}
		],
		"title": {
			"type": "text",
			"$t": "Sheet1"
		},
		"link": [
			{
				"rel": "alternate",
				"type": "text/html",
				"href": "https://spreadsheets.google.com/pub?key={{DOCUMENT_KEY}}"
			},
			{
				"rel": "http://schemas.google.com/g/2005#feed",
				"type": "application/atom+xml",
				"href": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values"
			},
			{
				"rel": "self",
				"type": "application/atom+xml",
				"href": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values?alt=json-in-script"
			}
		],
		"author": [
			{
				"name": {
					"$t": "user.name"
				},
				"email": {
					"$t": "user.name@gmail.com"
				}
			}
		],
		"openSearch$totalResults": {
			"$t": "17"
		},
		"openSearch$startIndex": {
			"$t": "1"
		},
		"entry": [
			{
				"id": {
					"$t": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values/{{CELL_KEY}}"
				},
				"updated": {
					"$t": "2014-01-22T19:27:16.240Z"
				},
				"category": [
					{
						"scheme": "http://schemas.google.com/spreadsheets/2006",
						"term": "http://schemas.google.com/spreadsheets/2006#list"
					}
				],
				"title": {
					"type": "text",
					"$t": "arugula"
				},
				"content": {
					"type": "text",
					"$t": "persquarefoot: 9, height: 9"
				},
				"link": [
					{
						"rel": "self",
						"type": "application/atom+xml",
						"href": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values/{{CELL_KEY}}"
					}
				],
				"gsx$name": {
					"$t": "arugula"
				},
				"gsx$persquarefoot": {
					"$t": "9"
				},
				"gsx$height": {
					"$t": "9"
				}
			},
			{
				"id": {
					"$t": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values/{{CELL_KEY}}"
				},
				"updated": {
					"$t": "2014-01-22T19:27:16.240Z"
				},
				"category": [
					{
						"scheme": "http://schemas.google.com/spreadsheets/2006",
						"term": "http://schemas.google.com/spreadsheets/2006#list"
					}
				],
				"title": {
					"type": "text",
					"$t": "basil"
				},
				"content": {
					"type": "text",
					"$t": "persquarefoot: 4, height: 9"
				},
				"link": [
					{
						"rel": "self",
						"type": "application/atom+xml",
						"href": "https://spreadsheets.google.com/feeds/list/{{DOCUMENT_KEY}}/od6/public/values/{{CELL_KEY}}"
					}
				],
				"gsx$name": {
					"$t": "basil"
				},
				"gsx$persquarefoot": {
					"$t": "4"
				},
				"gsx$height": {
					"$t": "9"
				}
			}
		]
	}
}

It's a lot of information, but it is fairly simply laid out. There is a lot of meta-data and author information. For the purposes of a simple display list, the only data we need is the 'entries' array. This is an array of Javascript objects, each of which represents a row in the spreadsheet. This assumes that the first row in the spreadsheet contains the titles for each column; e.g. 'name', 'per square foot', etc.

Note that within each of the entries in the array are three objects which correspond to the columns in the spreadsheet: gsx$name, gsx$persquarefoot, and gsx$height. These are simply the names of the columns, stripped of spaces and converted to all lower case. Each of these objects contains a single object with the key '$t', which has a value equal to the content of the corresponding cell from the spreadsheet.

If you review the code from my previous post you can see that, once the data structure is known, it is quite simple to parse the JSON for the values you need.

Note also that this entry does not address the process of modifying a Google Spreadsheet from outside of the Google Drive context; that is a significantly more complex operation.

Backbone/Marionette App Pulling Data From Google Spreadsheet

on Sun, 03/09/2014 - 11:21

Here is an example of a simple display application pulling data from a publicly available Google spreadsheet. It parses the data into a usable form and displays it in a sortable table using a Marionette.js Composite View.

The methods used, and pitfalls inherent, in pulliing a JSON feed from a Google spreadsheet warrant their own post, which will happen in the near future. In the meantime, here is the code for this app. First the Javascript:

/* define the application */
var app = new Backbone.Marionette.Application();

/* add the main region to the application */
app.addRegions({
	appRegion: '#AppBase'
});

/* define the module we will be using to create this app */
app.module('Garden',function(module, App, Backbone, Marionette, $, _){
	"use strict";

	/* the URL for the JSON feed from the Google Spreadsheep */
	module.spreadsheetKey = '0AtrrbpAB-ITbdFFXVklRbHZUVW5kX2F1UWVKVVBfOVE'; // a sample spreadsheet in google docs
	module.spreadsheetURL = 'https://spreadsheets.google.com/feeds/list/{{KEY}}/od6/public/values?alt=json-in-script&callback=?';

	/* model for an individual item */
	module.GardenModel = Backbone.Model.extend({
		/* the URL from which the data is pulled */
		url: module.spreadsheetURL.split('{{KEY}}').join(module.spreadsheetKey),

		/* take the data retrieved from the URL, go through it looking for only
			the data we actually need, and pull it out and format it. This is 
			necessary because the data returned by Google Spreadsheets
			is a cumbersome mess. */
		parse: function(data) {
			var parsedArray = [];

			/* use Underscore to iterate through each item in the feed,
				and pull out the necessary fields and put them in an
				array of anonymous objects which will be returned
				as the main model for this application */
			_.each(data.feed.entry,function(oItem) {
				parsedArray.push({
					name: oItem['gsx$name']['$t'],
					perSquareFoot: parseInt(oItem['gsx$persquarefoot']['$t']),
					height: parseFloat(oItem['gsx$height']['$t'])
				});
			});
			return ({dataset:parsedArray});
		}
	});

	module.PlantModel = Backbone.Model.extend({
		defaults: {
			name: '',
			perSquareFoot: 1,
			height: 1
		}
	});

	module.PlantCollection = Backbone.Collection.extend({
		model: module.PlantModel,

		/* initial field used to sort the models when the collection is displayed */
		comparator: 'name'
	});

	/* individual item view for each model in the collection */
	module.PlantItemView = Marionette.ItemView.extend({
		tagName: 'tr',
		template: '#row-template'
	});

	/* Composite View for displaying tabular data. Composite Views
		allow more complex HTML to be used when rendering a template */
	module.PlantCompositeView = Marionette.CompositeView.extend({
		tagName: 'table',
		itemView: module.PlantItemView,

		/* the element in the template which will serve as the container for the ItemViews */
		itemViewContainer: 'tbody',
		template: '#table-template',

		/* add mouse events */
		events: {
			'click th' : 'onHeaderClicked'
		},
		
		/* called when one of the table headers is clicked. 
			Pulls the value of the 'data-sort' attribute on the element
			and uses that as the sort argument in the collection */
		onHeaderClicked: function(event){
			this.collection.comparator = $(event.target).data('sort');
			this.collection.sort();
			this.render();
		}
	});

	/* main layout for the application */
	module.GardenLayoutView = Marionette.Layout.extend({
		tagName: 'div',
		id: 'AppContainer',
		template: '#layout-template',
		regions: {
			ListRegion: '#ListRegion'
		},

		/* called when the DOM for this view is available */
		onRender: function(){

			/* create a new collection based on the model fed into this view
				when it was created */
			var plantCollection = new module.PlantCollection(this.model.get('dataset'));

			/* create the new Composite View based on the collection*/
			var plantCompositeView = new module.PlantCompositeView({collection: plantCollection});

			/* display the composite view */
			this.ListRegion.show(plantCompositeView);
		}
	});

	/* add initializer, which fires when the app starts */
	module.addInitializer(function(){

		/* create a new instance of GardenModel */
		var baseModel = new module.GardenModel();

		/* create a local reference to 'this', which can be used in asynchronous callbacks */
		var capturedThis = this;

		/* load the data into the model */
		baseModel.fetch()
			.fail(function() {
				debugger;
			})
			.done(function() {
				/* on successfully loading the data, create a new instance of the main layout view,
					and feed the model into it. */
				var layout = new module.GardenLayoutView({model: baseModel});

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

});

/* when the DOM for this page is available, start the application */
$(document).ready(function() {app.start();});

And now the HTML and CSS

<!doctype html>
<html>
	<head>
		<title>Backbone/Marionette using data from Google Spreadsheet rendered in a Composite View</title>
		<style type="text/css">
			body {
				background: #ffffff;
			}
			#AppBase {
				width: 600px;
				margin: 10px auto 0 auto;
				padding: 0;
			}
			h1 {
				font: bold 16px/24px arial, sans-serif;
				text-align: center;
			}
			table {
				width: 600px;
				border-collapse: collapse;
			}
			th {
				font: 14px/18px courier;
				width: 200px;
				text-align: center;
				border: 1px solid #808080;
				background: #ededed;
				cursor: pointer;
			}
			th:hover {
				background: #cdcdcd;
				color: #990000;
			}
			td {
				font: 14px/18px courier;
				width: 200px;
				border: 1px solid #808080;
			}
			tfoot td {
				width: 600px;
				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 -->
		<!-- table row template -->
		<script type="text/template" id="row-template">
			<td><%- name %></td>
			<td><%- perSquareFoot %></td>
			<td><%- height %></td>
		</script>

		<!-- table body template for composite view -->
		<script type="text/template" id="table-template">
			<thead>
				<tr>
					<th data-sort="name">Name</th>
					<th data-sort="perSquareFoot">Per Square Foot</th>
					<th data-sort="height">Height</th>
				</tr>
			</thead>
			<tbody></tbody>
			<tfoot>
				<td colspan="3">Click column headers to sort table</td>
			</tfoot>
		</script>

		<!-- main layout template -->
		<script type="text/template" id="layout-template">
			<h1>Backbone/Marionette Application Which Retrieves Data From a Google Spreadsheet and Displays It In a Sortable Composite View</h1>
			<div id="ListRegion"></div>
		</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>

Here are links to the code libraries used in this app:

Backbone/Marionette App Using Models, Collections and LocalStorage

on Mon, 02/17/2014 - 21:46

This is an example of a simple library application which uses Backbone.js Models and Collections, and Marionette.js ItemViews, CollectionViews, and Layouts. It also uses the Backbone.js LocalStorage plugin, for saving data to the browser's local storage system.

Here is the Javascript file, called "script.js":

/* define the application */
var app = new Backbone.Marionette.Application();

/* define the region into which the app will be rendered */
app.addRegions({
	libraryRegion: '#libraryApp' // element in the HTML file
});

/* define the module we will use for this app */
app.module('Library',function(module, App, Backbone, Marionette, $, _){

	/* define the model used for a Genre */
	module.GenreModel = Backbone.Model.extend({
		defaults: {
			title: ''
		}
	});

	/* define the collection used for Genres */
	module.GenreCollection = Backbone.Collection.extend({

		/* set the model used in this collection */
		model: module.GenreModel,

		/* define localStorage container for this collection */
		localStorage: new Backbone.LocalStorage("LibraryGenreCollection")
	});

	/* define the model used for an Author */
	module.AuthorModel = Backbone.Model.extend({
		defaults: {
			firstName: '',
			lastName: ''
		}
	});

	/* define the collection used for Authors */
	module.AuthorCollection = Backbone.Collection.extend({
		/* set the model used in this collection */
		model: module.AuthorModel,

		/* define the localStorage container for his collection */
		localStorage: new Backbone.LocalStorage("LibraryAuthorCollection")
	});

	/* define the model used for a Book */
	module.BookModel = Backbone.Model.extend({
		defaults: {
			id: null,
			title: '',
			authorFirst: '',
			authorLast: '',
			genre: ''
		}
	});

	/* define the collection used for Books */
	module.BookCollection = Backbone.Collection.extend({

		/* set the model used in this collection */
		model: module.BookModel,
		localStorage: new Backbone.LocalStorage("LibraryCollection")
	});

	/* the main layout used for this app */
	module.LibraryView = Marionette.Layout.extend({

		/* local variables used to store/access collections */
		bookCollection: null,
		authorCollection: null,
		genreCollection: null,

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

		/* define mouse events */
		events: {
			'click #btnSave' : 'onSaveClicked',
			'click #btnClear' : 'onClearClicked',
			'click #btnClearCache' : 'onClearCacheClicked',
			'change #selectGenreRegion select' : 'onGenreSelected',
			'change #selectAuthorRegion select' : 'onAuthorSelected'
		},

		/* UI shortcuts */
		ui: {
			inputTitle: '#txtTitle', // title input field
			inputAuthorFirst: '#txtAuthorFirst', // author first name input field
			inputAuthorLast: '#txtAuthorLast', // author last name input field
			inputGenre: '#txtGenre', // genre input field
			selectGenre: '#selectGenre', // genre select list
			selectAuthor: '#selectAuthor' // author select list
		},

		/* regions into which other views will be rendered */
		regions: {
			authorRegion: '#selectAuthorRegion', // dropdown list of authors
			genreRegion: '#selectGenreRegion', // dropdown list of genres
			outputRegion: '#outputRegion' // list of books
		},

		/* called on click of SAVE button */
		onSaveClicked: function() {
			this.addBook();
		},

		/* called on click of CLEAR FORM button */
		onClearClicked: function() {
			this.clearForm();
		},

		/* called on click of CLEAR CACHE button.
			this will empty the localstorage cache for this app */
		onClearCacheClicked: function() {
			window.localStorage.clear();
			this.render();
		},

		/* called when a genre is selected from the dropdown menu */
		onGenreSelected: function() {
			var selectedGenre = $('#selectGenre').val();
			
			/* if the selected genre value is blank, do nothing */
			if(selectedGenre === '') return;

			/* update the genre input element with the value pulled from the select element */
			this.ui.inputGenre.val(selectedGenre);
		},

		/* called when an author is selected from the dropdown menu */
		onAuthorSelected: function() {
			
			/* set the values of the first and last name */
			var authorFirst = $('#selectAuthor').val().split(', ')[1];
			var authorLast = $('#selectAuthor').val().split(', ')[0];

			/* if the value is blank, do nothing */
			if(authorFirst === '' && authorLast === '') return;

			/* update the appropriate input elements with the values pulled from the select element */
			this.ui.inputAuthorFirst.val(authorFirst);
			this.ui.inputAuthorLast.val(authorLast);
		},

		/* add a book to the collection */
		addBook: function() {

			/* get values from the form elements */
			var newTitle = this.ui.inputTitle.val(),
				newAuthorFirst = this.ui.inputAuthorFirst.val(),
				newAuthorLast = this.ui.inputAuthorLast.val(),
				newGenre = this.ui.inputGenre.val();

			/* add a new model to the book collection.
				Automatically adds and instance of the 
				module.BookModel type because that is the 
				model associated with the BookCollection */
			this.bookCollection.add({
				id: new Date().getTime(),
				title: newTitle,
				authorFirst: newAuthorFirst,
				authorLast: newAuthorLast,
				genre: newGenre
			});

			/* iterate through the collection and save each model. 
				necessary to do it this way because of how
				Backbone.localStorage works. */
			this.bookCollection.each(function(oBook) {
				oBook.save();
			});

			/* clear the form elements */
			this.clearForm();

			/* add the author to the list of authors */
			this.addAuthor(newAuthorFirst,newAuthorLast);

			/* add the genre to the list of genres */
			this.addGenre(newGenre);
		},

		/* add a genre to the list of genres */
		addGenre: function(sGenre) {

			/* set a state variable */
			var exists = false;

			/* iterate through the collection to see if the genre
				we are attempting to add already exists */
			this.genreCollection.each(function(oGenre) {
				if(oGenre.get('title') === sGenre) exists = true;
			});

			/* if the genre already exists, exit and do nothing */
			if(exists) return;

			/* add the new genre to the collection. Defaults to an
				instance of module.GenreModel, because that is what
				is associated with the module.GenreCollection */
			this.genreCollection.add({
				title: sGenre
			});

			/* iterate through the genres in the collection and save each one */
			this.genreCollection.each(function(oGenre) {
				oGenre.save();
			});
		},

		/* add an author to the list of authors */
		addAuthor: function(sAuthFirst, sAuthLast) {
			/* set a state variable */
			var exists = false;

			/* iterate through the collection to see if the author
				we are attempting to add already exists */
			this.authorCollection.each(function(oAuthor) {
				if(oAuthor.get('firstName') === sAuthFirst && oAuthor.get('lastName') === sAuthLast) exists = true;
			});

			/* if the author already exists, exit and do nothing */
			if(exists) return;

			/* add the new author to the collection. Defaults to an
				instance of module.AuthorModel, because that is what
				is associated with the module.AuthorCollection */
			this.authorCollection.add({
				firstName: sAuthFirst,
				lastName: sAuthLast
			});

			/* iterate through the authors in the collection and save each one */
			this.authorCollection.each(function(oAuthor) {
				oAuthor.save();
			});
		},

		/* clear all of the imput elements in the form */
		clearForm: function() {
			this.ui.inputTitle.val('');
			this.ui.inputAuthorFirst.val('');
			this.ui.inputAuthorLast.val('');
			this.ui.inputGenre.val('');
		},

		/* called when the DOM for this view is ready for manipulation */
		onRender: function(){
			/* save a local reference to the view, for use in
				model and collection callbacks */
			var capturedThis = this;

			/* create a new instance of the book collection */
			this.bookCollection = new module.BookCollection();

			/* load the book collection from local storage */
			this.bookCollection.fetch()
				.fail(function(){ /* something went wrong */
					console.log('failed to load book collection');
				})
				.done(function(){
					/* when loaded, create a new collectionview using it */
					var bookCollectionView = new module.BookCollectionView({collection: capturedThis.bookCollection});

					/* render the collectionview in the appropriate region */
					capturedThis.outputRegion.show(bookCollectionView);
				});
			
			/* create a new instance of the genre collection */
			this.genreCollection = new module.GenreCollection();

			/* load the collection of genres from local storage */
			this.genreCollection.fetch()
				.fail(function() { /* something went wrong */
					console.log('failed to load genre collection');
				})
				.done(function() { /* loaded successfully */

					/* if the genre collection is empty, add an initial element to use as a label */
					if(capturedThis.genreCollection.length === 0) {
						capturedThis.genreCollection.add({
							title: ''
						});
					}
					/* Create a new collectionview using the genreCollection */
					var genreCollectionView = new module.GenreCollectionView({collection: capturedThis.genreCollection});

					/* render the collectionview in the appropriate region */
					capturedThis.genreRegion.show(genreCollectionView);
				});

			/* create a new instance of the author collection */
			this.authorCollection = new module.AuthorCollection();

			/* load the collection of authors from local storage */
			this.authorCollection.fetch()
				.fail(function() { /* something went wrong */
					console.log('failed to load author collection');
				})
				.done(function() { /* loaded succesfully */

					/* if the genre collection is empty, add an initial element to use as a label */
					if(capturedThis.authorCollection.length === 0) {
						capturedThis.authorCollection.add({
							firstName: '',
							lastName: ''
						});
					}
					/* when the collection is loaded, create a new collectionview using it */
					var authorCollectionView = new module.AuthorCollectionView({collection: capturedThis.authorCollection});

					/* render the collectionview in the appropriate region */
					capturedThis.authorRegion.show(authorCollectionView);
				});
		}
	});
	
	/* item view for individual book */
	module.BookItemView = Marionette.ItemView.extend({
		tagName: 'li',
		template: '#book-template',
		events: {
			'click .delete' : 'onDeleteClicked'
		},

		/* when the delete button is clicked, destroy this model
			this removes the model from the parent collection */
		onDeleteClicked: function(){
			this.model.destroy();
		}
	});

	/* collection view for the list of books */
	module.BookCollectionView = Marionette.CollectionView.extend({
		tagName: 'ul',
		itemView: module.BookItemView,
		id: 'bookList',

		/* listen for changes in the collection or the models therein */
		modelEvents: {
			'change' : 'onModelChanged'
		},

		/* when the collection or one of the models therein broadcasts a change event,
			re-render this view. In this example, this is called when a book is added
			or removed from the collection. */
		onModelChanged: function() {
			this.render();
		}
	});

	/* item view for an individual genre */
	module.GenreItemView = Marionette.ItemView.extend({
		template: '#genre-template',
		tagName: 'option',

		/* add attributes to this element. Setting a return value as is done
			here allows for attributes to be set 'on the fly'; in this instance
			each element created will have a unique value derived from
			the model associated with this view. */
		attributes: function(){
			return {
				value: this.model.get('title')
			}
		}
	});

	/* define the genre collection view */
	module.GenreCollectionView = Marionette.CollectionView.extend({
		tagName: 'select',
		itemView: module.GenreItemView,
		id: 'selectGenre'
	});

	module.AuthorItemView = Marionette.ItemView.extend({
		template: '#author-template',
		tagName: 'option',

		/* add attributes to this element. Setting a return value as is done
			here allows for attributes to be set 'on the fly'; in this instance
			each element created will have a unique value derived from
			the lastName and firstName attributes of the model associated with this view. */
		attributes: function(){
			var authName = this.model.get('lastName') + ', ' + this.model.get('firstName');
			return {
				value: authName
			}
		}
	});

	/* define the author collection view */
	module.AuthorCollectionView = Marionette.CollectionView.extend({
		tagName: 'select',
		itemView: module.AuthorItemView,
		id: 'selectAuthor'
	});

	/* add a method which will fire on the initialization
		of this application. In this case, render
		the main view in the region which was defined
		up at the top of this file. */
	module.addInitializer(function(){
		app.libraryRegion.show(new module.LibraryView());
	});

});

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

Here is the HTML file:

<!doctype html>
<html>
	<head>
		<title>Library App Created in Backbone/Marionette Using LocalStorage</title>
		<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<!-- Base element for app -->
		<!--
			Don't use the BODY element as the base element, because when the app renders in the BODY
			it will wipe out the template files before the views can pick them up.
		-->
		
		<div id="libraryApp"></div>

		<!-- TEMPLATES -->
		<!-- main layout template -->
		<script type="text/template" id="layout-template">
			<h1>Library App Using LocalStorage</h1>
			<div id="inputRegion">
				<div><label>Title</label><input id="txtTitle" type="text"/></div>
				<div class="author-row">
					<label>Author (last, first)</label><input id="txtAuthorLast" type="text"/><input id="txtAuthorFirst" type="text"/>
					<div id="selectAuthorRegion" class="selectContainer"></div>
				</div>
				<div>
					<label>Genre</label><input id="txtGenre" type="text"/>
					<div id="selectGenreRegion" class="selectContainer"></div>
				</div>
				<p class="buttons">
					<button id="btnSave">Save</button>
					<button id="btnClear">Clear</button>
					<button id="btnClearCache">Clear LocalStorage</button>
				</p>
			</div>
			<div id="outputRegion"></div>
		</script>

		<!-- book line item template -->
		<script type="text/template" id="book-template">
			<span>Title: <%- title %></span>
			<span>Author: <%- authorLast %>, <%- authorFirst %><br/></span>
			<span>Genre: <%- genre %><br/></span>
			<button class="delete">X</button>
		</script>

		<!-- genre option template -->
		<script type="text/template" id="genre-template">
		<%- title %>
		</script>

		<!-- author option template -->
		<script type="text/template" id="author-template">
		<%- lastName %>, <%- firstName %>
		</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.localStorage.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>

And here is the style sheet:

#libraryApp {
	width: 600px;
	margin: 0 auto;
}
h1 {
	float:left;
	text-align: center;
	width: 600px;
	margin: 0 auto 10px auto;
	border-bottom: 1px solid #cdcdcd;
}
#inputRegion,#outputRegion {
	float: left;
	width: 100%;
	margin: 0 0 10px 0;
}
#inputRegion > div {
	float: left;
	clear: both;
}
#inputRegion label {
	float: left;
	width: 120px;
}
#inputRegion input {
	float: left;
	width: 200px;
}
#inputRegion .author-row input {
	width: 98px;
}
#inputRegion .selectContainer {
	float: left;
}
#inputRegion select {
	float: left;
	margin-left: 20px;
	width: 200px;
}
.buttons {
	float: left;
	clear: both;
}
#outputRegion ul{
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
	border-top: 1px solid #ccc;
}
#outputRegion li {
	position: relative;
	float: left;
	width: 100%;
	height: 60px;
	border-bottom: 1px solid #ccc;
}
#outputRegion li span {
	float: left;
	width: 80%;
}
#outputRegion li button {
	position: absolute;
	right: 0;
	top: 5px;
}

These are the code libraries used in this demo:

 

Simple Marionette.js Model, Collection and CollectionView Example

on Sun, 02/09/2014 - 10:05

This is a simple example of using Backbone.js models and collections, and the Marionette.js ItemView and CollectionView. Here is the Javascript:

/* 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, $, _){
	
	/* definition for book model, with default example of data structure */
	module.BookModel = Backbone.Model.extend({
		defaults: {
			title: '',
			authorFirst: '',
			authorLast: ''
		}
	});

	/* definition for book collection */
	module.BookCollection = Backbone.Collection.extend({
		
		/* set model type used for this collection */
		model: module.BookModel,

		/* comparator determines how collection is sorted */
		comparator: 'authorLast'
	});

	/* definition for individual item view */
	module.BookItemView = Marionette.ItemView.extend({
		tagName: 'li',

		/* set the template used to display this view */
		template: '#itemView-template',

		/* used to show the order in which these method are called */
		initialize: function(){ console.log('BookItemView: initialize >>> ' + this.model.get('title')) },
		onRender: function(){ console.log('BookItemView: onRender >>> ' + this.model.get('title')) },
		onShow: function(){ console.log('BookItemView: onShow >>> ' + this.model.get('title')) }
	});

	/* definition for collection view */
	module.BookCollectionView = Marionette.CollectionView.extend({
		tagName: 'ul',

		/* explicitly set the itemview used to display the models in this collection */
		itemView: module.BookItemView,

		initialize: function(){ console.log('BookCollectionView: initialize') },
		onRender: function(){ console.log('BookCollectionView: onRender') },
		onShow: function(){ console.log('BookCollectionView: 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'
		},

		/* 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 an array of books using anonymouse objects;
				the objects have the same structure as in the 'defaults'
				attribute of the module.BookModel definition */
			var bookArray = [];
			bookArray.push({title: 'Wolf',authorLast: 'Harrison', authorFirst: 'Jim'});
			bookArray.push({title: 'The Theory and Practice of Rivers', authorLast: 'Snyder', authorFirst: 'Gary'});
			bookArray.push({title: 'Weather Central',authorLast: 'Kooser', authorFirst: 'Ted'});
			bookArray.push({title: 'Losing Season',authorLast: 'Ridl', authorFirst: 'Jack'});
			bookArray.push({title: 'Mornings Like This',authorLast: 'Dillard', authorFirst: 'Annie'});

			/* create a collection using the array of anonymous objects */
			var bookCollection = new module.BookCollection(bookArray);

			/* create new instance of the collection view using the bookCollection */
			var bookCollectionView = new module.BookCollectionView({collection: bookCollection});

			/* display the collection view in region 1 */
			this.RegionOne.show(bookCollectionView);
		},

		/* 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, including the templates used by the Marionette views.

<!doctype html>
<html>
	<head>
		<title>Backbone/Marionette basic setup with nested views</title>
		<style type="text/css">
		body {
			background: #ffffff;
		}
		#AppBase {
			width: 400px;
			margin: 10px auto;
			padding: 0;
			outline: 1px solid #808080;
		}
		#AppContainer {
			width: 400px;
			margin: 0;
			padding: 0;
		}
		h1 {
			width:100%;
			margin: 0;
			padding: 0;
			text-align: center;
			border-bottom: 1px solid #808080;
		}
		ul {
			margin: 1em 0 0 0;
			padding:0;
			list-style-type: none;
			width: 400px;
		}
		li {
			margin-bottom: .5em;
			padding: 0 0 .5em 1em;
			border-bottom: 1px solid #dedede;
		}
		</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>
		</script>

		<!-- bookItemView template -->
		<!-- This used the Underscore templating system, which is built into Marionette.js -->
		<script type="text/template" id="itemView-template">
			<span><b>Title</b>: <%- title %></span><br/>
			<span><b>Author</b>: <%- authorLast %>, <%- authorFirst %></span>
		</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>

Here are links to the code libraries used to create this example:

Pages