spwa-backbone-0.9.js 

/*
 * spwa-backbone
 * version 0.9 (01/17/11)
 * http://github.com/ibjhb/spwa-backbone/
 * 
 * @requires Backbone.js (http://documentcloud.github.com/backbone)
 * @requires Underscore (http://documentcloud.github.com/underscore)
 * @requires jQuery (http://jquery.com)
 *
 * Copyright (c) 2011 James Brown
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
*/

$(function(){

Define our page object:

 
	window.page = Backbone.Model.extend({});

Define our collection of pages:

 
	window.sitepages = Backbone.Collection.extend({
		model: page
	});

Create a "pages" object which contains a collection of page models:

 
	window.pages = new sitepages;

Define our page view:

 
	window.pageView = Backbone.View.extend({

Let's put each view into a div:

 
		 tagName			: "div"

Setup a class for each view:

 
		,className			: "page"

This runs when a new view is made:

 
		,initialize: function(){

Keep render and close bound to "this":

 
			_.bindAll(this, "render");

When "change" is called, let's render the view:

 
  			this.model.bind("change", this.render);

Setting the view into the model:

 
  			this.model.view = this;

Render out the view (page) to the screen:

 
			this.render();
		}

This function takes the html from the model, inserts into the view and renders it to the screen:

 
		,render: function() {
			$(this.el).html($(this.model.get("htmlTemplate")).html()).attr("id", this.model.get("id"));
			return this;
		}
	});

Define our site:

 
	window.site = Backbone.Controller.extend({

Set the app to the page body:

 
		 el:		$("body")

This defines our routes and calls show when a route is encountered:

 
		,routes: {
					"!:pageName": "show"
		},

Fire up when the site object is called. We pass in a jQuery array of script objects:

 
		initialize: function(contentPages){

Loop over each object, define some attributes and push them into the "pages" collection:

 
			contentPages.each(function(i, contentPage){
				var contentPage = $(contentPage);
				var page = {
					 id: 			contentPage.attr("id").split("-")[0]						 
					,htmlTemplate:	"#" + contentPage.attr("id")
				}
				pages.add(page);
			})

If there isn't a #!something set the site to "home":

 
			if (window.Backbone.history.getFragment() == ""){
				this.show("home")
			}
		},

This funciton does the actual page "switching". It pulls the model out of the collection of pages. Then if the view doesn't exist, it creates it, if it does it loads it, then shows it in the body:

 
		show: function(pageName) {
			var page = pages.get(pageName);
			var view = (page.view) ? page.view : new pageView({model: page});
			$(this.el).html(view.el);
		}
	});

Fire up our applicaiton and pass in an array of script/html objects

 
	window.App = new site($("script[type=text/template]"));

Start hashtag tracking via Backbone:

 
	Backbone.history.start();
});