Merge pull request #573 from stephenplusplus/bbm

backbone_marionette_require code style + spec comp.

labs/dependency-examples/backbone_marionette_require/.jshintignore

-app.build.js
-js/main.built.js
-js/lib/tpl.js
-js/lib/backbone.js
-js/lib/backbone.marionette.js
-js/lib/backbone-localStorage.js

labs/dependency-examples/backbone_marionette_require/app.build.js

 ({
-  baseUrl: "js/",
-  mainConfigFile: 'js/main.js',
-  out: "js/main.built.js",
-  include : 'main',
+	baseUrl: "js/",
+	mainConfigFile: 'js/main.js',
+	out: "js/main.built.js",
+	include : 'main',
 
-  optimize: 'uglify',
+	optimize: 'uglify',
 
-  uglify: {
-    toplevel: true,
-    ascii_only: true,
-    beautify: false,
-    max_line_length: 1000
-  },
+	uglify: {
+		toplevel: true,
+		ascii_only: true,
+		beautify: false,
+		max_line_length: 1000
+	},
 
-  inlineText: true,
-  useStrict: false,
+	inlineText: true,
+	useStrict: false,
 
-  skipPragmas: false,
-  skipModuleInsertion: false,
-  stubModules: ['text'],
-  optimizeAllPluginResources: false,
-  findNestedDependencies: false,
-  removeCombined: false,
+	skipPragmas: false,
+	skipModuleInsertion: false,
+	stubModules: ['text'],
+	optimizeAllPluginResources: false,
+	findNestedDependencies: false,
+	removeCombined: false,
 
-  fileExclusionRegExp: /^\./,
+	fileExclusionRegExp: /^\./,
 
-  preserveLicenseComments: true,
+	preserveLicenseComments: true,
 
-  logLevel: 0
+	logLevel: 0
 })

labs/dependency-examples/backbone_marionette_require/bower.json

@@ -4,6 +4,8 @@
   "dependencies": {
     "todomvc-common": "~0.1.6",
     "requirejs": "~2.1.6",
-    "backbone.marionette": "~1.0.2"
+    "underscore": "~1.4.4",
+    "backbone.marionette": "~1.0.3",
+    "backbone.localStorage": "~1.1.4"
   }
 }

labs/dependency-examples/backbone_marionette_require/bower_components/backbone.localStorage/backbone.localStorage.js

+/**
+ * Backbone localStorage Adapter
+ * Version 1.1.4
+ *
+ * https://github.com/jeromegn/Backbone.localStorage
+ */
+(function (root, factory) {
+   if (typeof exports === 'object') {
+     module.exports = factory(require("underscore"), require("backbone"));
+   } else if (typeof define === "function" && define.amd) {
+      // AMD. Register as an anonymous module.
+      define(["underscore","backbone"], function(_, Backbone) {
+        // Use global variables if the locals are undefined.
+        return factory(_ || root._, Backbone || root.Backbone);
+      });
+   } else {
+      // RequireJS isn't being used. Assume underscore and backbone are loaded in <script> tags
+      factory(_, Backbone);
+   }
+}(this, function(_, Backbone) {
+// A simple module to replace `Backbone.sync` with *localStorage*-based
+// persistence. Models are given GUIDS, and saved into a JSON object. Simple
+// as that.
+
+// Hold reference to Underscore.js and Backbone.js in the closure in order
+// to make things work even if they are removed from the global namespace
+
+// Generate four random hex digits.
+function S4() {
+   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+};
+
+// Generate a pseudo-GUID by concatenating random hexadecimal.
+function guid() {
+   return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+};
+
+// Our Store is represented by a single JS object in *localStorage*. Create it
+// with a meaningful name, like the name you'd give a table.
+// window.Store is deprectated, use Backbone.LocalStorage instead
+Backbone.LocalStorage = window.Store = function(name) {
+  if( !this.localStorage ) {
+    throw "Backbone.localStorage: Environment does not support localStorage."
+  }
+  this.name = name;
+  var store = this.localStorage().getItem(this.name);
+  this.records = (store && store.split(",")) || [];
+};
+
+_.extend(Backbone.LocalStorage.prototype, {
+
+  // Save the current state of the **Store** to *localStorage*.
+  save: function() {
+    this.localStorage().setItem(this.name, this.records.join(","));
+  },
+
+  // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
+  // have an id of it's own.
+  create: function(model) {
+    if (!model.id) {
+      model.id = guid();
+      model.set(model.idAttribute, model.id);
+    }
+    this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
+    this.records.push(model.id.toString());
+    this.save();
+    return this.find(model);
+  },
+
+  // Update a model by replacing its copy in `this.data`.
+  update: function(model) {
+    this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
+    if (!_.include(this.records, model.id.toString()))
+      this.records.push(model.id.toString()); this.save();
+    return this.find(model);
+  },
+
+  // Retrieve a model from `this.data` by id.
+  find: function(model) {
+    return this.jsonData(this.localStorage().getItem(this.name+"-"+model.id));
+  },
+
+  // Return the array of all models currently in storage.
+  findAll: function() {
+    // Lodash removed _#chain in v1.0.0-rc.1
+    return (_.chain || _)(this.records)
+      .map(function(id){
+        return this.jsonData(this.localStorage().getItem(this.name+"-"+id));
+      }, this)
+      .compact()
+      .value();
+  },
+
+  // Delete a model from `this.data`, returning it.
+  destroy: function(model) {
+    if (model.isNew())
+      return false
+    this.localStorage().removeItem(this.name+"-"+model.id);
+    this.records = _.reject(this.records, function(id){
+      return id === model.id.toString();
+    });
+    this.save();
+    return model;
+  },
+
+  localStorage: function() {
+    return localStorage;
+  },
+
+  // fix for "illegal access" error on Android when JSON.parse is passed null
+  jsonData: function (data) {
+      return data && JSON.parse(data);
+  },
+
+  // Clear localStorage for specific collection.
+  _clear: function() {
+    var local = this.localStorage(),
+      itemRe = new RegExp("^" + this.name + "-");
+
+    // Remove id-tracking item (e.g., "foo").
+    local.removeItem(this.name);
+
+    // Lodash removed _#chain in v1.0.0-rc.1
+    // Match all data items (e.g., "foo-ID") and remove.
+    (_.chain || _)(local).keys()
+      .filter(function (k) { return itemRe.test(k); })
+      .each(function (k) { local.removeItem(k); });
+  },
+
+  // Size of localStorage.
+  _storageSize: function() {
+    return this.localStorage().length;
+  }
+
+});
+
+// localSync delegate to the model or collection's
+// *localStorage* property, which should be an instance of `Store`.
+// window.Store.sync and Backbone.localSync is deprecated, use Backbone.LocalStorage.sync instead
+Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function(method, model, options) {
+  var store = model.localStorage || model.collection.localStorage;
+
+  var resp, errorMessage, syncDfd = Backbone.$.Deferred && Backbone.$.Deferred(); //If $ is having Deferred - use it.
+
+  try {
+
+    switch (method) {
+      case "read":
+        resp = model.id != undefined ? store.find(model) : store.findAll();
+        break;
+      case "create":
+        resp = store.create(model);
+        break;
+      case "update":
+        resp = store.update(model);
+        break;
+      case "delete":
+        resp = store.destroy(model);
+        break;
+    }
+
+  } catch(error) {
+    if (error.code === DOMException.QUOTA_EXCEEDED_ERR && store._storageSize() === 0)
+      errorMessage = "Private browsing is unsupported";
+    else
+      errorMessage = error.message;
+  }
+
+  if (resp) {
+    if (options && options.success) {
+      if (Backbone.VERSION === "0.9.10") {
+        options.success(model, resp, options);
+      } else {
+        options.success(resp);
+      }
+    }
+    if (syncDfd) {
+      syncDfd.resolve(resp);
+    }
+  
+  } else {
+    errorMessage = errorMessage ? errorMessage
+                                : "Record Not Found";
+
+    if (options && options.error)
+      if (Backbone.VERSION === "0.9.10") {
+        options.error(model, errorMessage, options);
+      } else {
+        options.error(errorMessage);
+      }
+
+    if (syncDfd)
+      syncDfd.reject(errorMessage);
+  }
+
+  // add compatibility with $.ajax
+  // always execute callback for success and error
+  if (options && options.complete) options.complete(resp);
+
+  return syncDfd && syncDfd.promise();
+};
+
+Backbone.ajaxSync = Backbone.sync;
+
+Backbone.getSyncMethod = function(model) {
+  if(model.localStorage || (model.collection && model.collection.localStorage)) {
+    return Backbone.localSync;
+  }
+
+  return Backbone.ajaxSync;
+};
+
+// Override 'Backbone.sync' to default to localSync,
+// the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
+Backbone.sync = function(method, model, options) {
+  return Backbone.getSyncMethod(model).apply(this, [method, model, options]);
+};
+
+return Backbone.LocalStorage;
+}));

labs/dependency-examples/backbone_marionette_require/bower_components/backbone.marionette/lib/backbone.marionette.js

+// MarionetteJS (Backbone.Marionette)
+// ----------------------------------
+// v1.0.3
+//
+// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+//
+// http://marionettejs.com
+
+
+
+/*!
+ * Includes BabySitter
+ * https://github.com/marionettejs/backbone.babysitter/
+ *
+ * Includes Wreqr
+ * https://github.com/marionettejs/backbone.wreqr/
+ */
+
+// Backbone.BabySitter
+// -------------------
+// v0.0.5
+//
+// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+//
+// http://github.com/babysitterjs/backbone.babysitter
+
+// Backbone.ChildViewContainer
+// ---------------------------
+//
+// Provide a container to store, retrieve and
+// shut down child views.
+
+Backbone.ChildViewContainer = (function(Backbone, _){
+  
+  // Container Constructor
+  // ---------------------
+
+  var Container = function(initialViews){
+    this._views = {};
+    this._indexByModel = {};
+    this._indexByCollection = {};
+    this._indexByCustom = {};
+    this._updateLength();
+
+    this._addInitialViews(initialViews);
+  };
+
+  // Container Methods
+  // -----------------
+
+  _.extend(Container.prototype, {
+
+    // Add a view to this container. Stores the view
+    // by `cid` and makes it searchable by the model
+    // and/or collection of the view. Optionally specify
+    // a custom key to store an retrieve the view.
+    add: function(view, customIndex){
+      var viewCid = view.cid;
+
+      // store the view
+      this._views[viewCid] = view;
+
+      // index it by model
+      if (view.model){
+        this._indexByModel[view.model.cid] = viewCid;
+      }
+
+      // index it by collection
+      if (view.collection){
+        this._indexByCollection[view.collection.cid] = viewCid;
+      }
+
+      // index by custom
+      if (customIndex){
+        this._indexByCustom[customIndex] = viewCid;
+      }
+
+      this._updateLength();
+    },
+
+    // Find a view by the model that was attached to
+    // it. Uses the model's `cid` to find it, and
+    // retrieves the view by it's `cid` from the result
+    findByModel: function(model){
+      var viewCid = this._indexByModel[model.cid];
+      return this.findByCid(viewCid);
+    },
+
+    // Find a view by the collection that was attached to
+    // it. Uses the collection's `cid` to find it, and
+    // retrieves the view by it's `cid` from the result
+    findByCollection: function(col){
+      var viewCid = this._indexByCollection[col.cid];
+      return this.findByCid(viewCid);
+    },
+
+    // Find a view by a custom indexer.
+    findByCustom: function(index){
+      var viewCid = this._indexByCustom[index];
+      return this.findByCid(viewCid);
+    },
+
+    // Find by index. This is not guaranteed to be a
+    // stable index.
+    findByIndex: function(index){
+      return _.values(this._views)[index];
+    },
+
+    // retrieve a view by it's `cid` directly
+    findByCid: function(cid){
+      return this._views[cid];
+    },
+
+    // Remove a view
+    remove: function(view){
+      var viewCid = view.cid;
+
+      // delete model index
+      if (view.model){
+        delete this._indexByModel[view.model.cid];
+      }
+
+      // delete collection index
+      if (view.collection){
+        delete this._indexByCollection[view.collection.cid];
+      }
+
+      // delete custom index
+      var cust;
+
+      for (var key in this._indexByCustom){
+        if (this._indexByCustom.hasOwnProperty(key)){
+          if (this._indexByCustom[key] === viewCid){
+            cust = key;
+            break;
+          }
+        }
+      }
+
+      if (cust){
+        delete this._indexByCustom[cust];
+      }
+
+      // remove the view from the container
+      delete this._views[viewCid];
+
+      // update the length
+      this._updateLength();
+    },
+
+    // Call a method on every view in the container,
+    // passing parameters to the call method one at a
+    // time, like `function.call`.
+    call: function(method, args){
+      args = Array.prototype.slice.call(arguments, 1);
+      this.apply(method, args);
+    },
+
+    // Apply a method on every view in the container,
+    // passing parameters to the call method one at a
+    // time, like `function.apply`.
+    apply: function(method, args){
+      var view;
+
+      // fix for IE < 9
+      args = args || [];
+
+      _.each(this._views, function(view, key){
+        if (_.isFunction(view[method])){
+          view[method].apply(view, args);
+        }
+      });
+
+    },
+
+    // Update the `.length` attribute on this container
+    _updateLength: function(){
+      this.length = _.size(this._views);
+    },
+
+    // set up an initial list of views
+    _addInitialViews: function(views){
+      if (!views){ return; }
+
+      var view, i,
+          length = views.length;
+
+      for (i=0; i<length; i++){
+        view = views[i];
+        this.add(view);
+      }
+    }
+  });
+
+  // Borrowing this code from Backbone.Collection:
+  // http://backbonejs.org/docs/backbone.html#section-106
+  //
+  // Mix in methods from Underscore, for iteration, and other
+  // collection related features.
+  var methods = ['forEach', 'each', 'map', 'find', 'detect', 'filter', 
+    'select', 'reject', 'every', 'all', 'some', 'any', 'include', 
+    'contains', 'invoke', 'toArray', 'first', 'initial', 'rest', 
+    'last', 'without', 'isEmpty', 'pluck'];
+
+  _.each(methods, function(method) {
+    Container.prototype[method] = function() {
+      var views = _.values(this._views);
+      var args = [views].concat(_.toArray(arguments));
+      return _[method].apply(_, args);
+    };
+  });
+
+  // return the public API
+  return Container;
+})(Backbone, _);
+
+// Backbone.Wreqr (Backbone.Marionette)
+// ----------------------------------
+// v0.2.0
+//
+// Copyright (c)2013 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
+//
+// http://github.com/marionettejs/backbone.wreqr
+
+
+Backbone.Wreqr = (function(Backbone, Marionette, _){
+  "use strict";
+  var Wreqr = {};
+
+  // Handlers
+// --------
+// A registry of functions to call, given a name
+
+Wreqr.Handlers = (function(Backbone, _){
+  "use strict";
+  
+  // Constructor
+  // -----------
+
+  var Handlers = function(options){
+    this.options = options;
+    this._wreqrHandlers = {};
+    
+    if (_.isFunction(this.initialize)){
+      this.initialize(options);
+    }
+  };
+
+  Handlers.extend = Backbone.Model.extend;
+
+  // Instance Members
+  // ----------------
+
+  _.extend(Handlers.prototype, Backbone.Events, {
+
+    // Add multiple handlers using an object literal configuration
+    setHandlers: function(handlers){
+      _.each(handlers, function(handler, name){
+        var context = null;
+
+        if (_.isObject(handler) && !_.isFunction(handler)){
+          context = handler.context;
+          handler = handler.callback;
+        }
+
+        this.setHandler(name, handler, context);
+      }, this);
+    },
+
+    // Add a handler for the given name, with an
+    // optional context to run the handler within
+    setHandler: function(name, handler, context){
+      var config = {
+        callback: handler,
+        context: context
+      };
+
+      this._wreqrHandlers[name] = config;
+
+      this.trigger("handler:add", name, handler, context);
+    },
+
+    // Determine whether or not a handler is registered
+    hasHandler: function(name){
+      return !! this._wreqrHandlers[name];
+    },
+
+    // Get the currently registered handler for
+    // the specified name. Throws an exception if
+    // no handler is found.
+    getHandler: function(name){
+      var config = this._wreqrHandlers[name];
+
+      if (!config){
+        throw new Error("Handler not found for '" + name + "'");
+      }
+
+      return function(){
+        var args = Array.prototype.slice.apply(arguments);
+        return config.callback.apply(config.context, args);
+      };
+    },
+
+    // Remove a handler for the specified name
+    removeHandler: function(name){
+      delete this._wreqrHandlers[name];
+    },
+
+    // Remove all handlers from this registry
+    removeAllHandlers: function(){
+      this._wreqrHandlers = {};
+    }
+  });
+
+  return Handlers;
+})(Backbone, _);
+
+  // Wreqr.CommandStorage
+// --------------------
+//
+// Store and retrieve commands for execution.
+Wreqr.CommandStorage = (function(){
+  "use strict";
+
+  // Constructor function
+  var CommandStorage = function(options){
+    this.options = options;
+    this._commands = {};
+
+    if (_.isFunction(this.initialize)){
+      this.initialize(options);
+    }
+  };
+
+  // Instance methods
+  _.extend(CommandStorage.prototype, Backbone.Events, {
+
+    // Get an object literal by command name, that contains
+    // the `commandName` and the `instances` of all commands
+    // represented as an array of arguments to process
+    getCommands: function(commandName){
+      var commands = this._commands[commandName];
+
+      // we don't have it, so add it
+      if (!commands){
+
+        // build the configuration
+        commands = {
+          command: commandName, 
+          instances: []
+        };
+
+        // store it
+        this._commands[commandName] = commands;
+      }
+
+      return commands;
+    },
+
+    // Add a command by name, to the storage and store the
+    // args for the command
+    addCommand: function(commandName, args){
+      var command = this.getCommands(commandName);
+      command.instances.push(args);
+    },
+
+    // Clear all commands for the given `commandName`
+    clearCommands: function(commandName){
+      var command = this.getCommands(commandName);
+      command.instances = [];
+    }
+  });
+
+  return CommandStorage;
+})();
+
+  // Wreqr.Commands
+// --------------
+//
+// A simple command pattern implementation. Register a command
+// handler and execute it.
+Wreqr.Commands = (function(Wreqr){
+  "use strict";
+
+  return Wreqr.Handlers.extend({
+    // default storage type
+    storageType: Wreqr.CommandStorage,
+
+    constructor: function(options){
+      this.options = options || {};
+
+      this._initializeStorage(this.options);
+      this.on("handler:add", this._executeCommands, this);
+
+      var args = Array.prototype.slice.call(arguments);
+      Wreqr.Handlers.prototype.constructor.apply(this, args);
+    },
+
+    // Execute a named command with the supplied args
+    execute: function(name, args){
+      name = arguments[0];
+      args = Array.prototype.slice.call(arguments, 1);
+
+      if (this.hasHandler(name)){
+        this.getHandler(name).apply(this, args);
+      } else {
+        this.storage.addCommand(name, args);
+      }
+
+    },
+
+    // Internal method to handle bulk execution of stored commands
+    _executeCommands: function(name, handler, context){
+      var command = this.storage.getCommands(name);
+
+      // loop through and execute all the stored command instances
+      _.each(command.instances, function(args){
+        handler.apply(context, args);
+      });
+
+      this.storage.clearCommands(name);
+    },
+
+    // Internal method to initialize storage either from the type's
+    // `storageType` or the instance `options.storageType`.
+    _initializeStorage: function(options){
+      var storage;
+
+      var StorageType = options.storageType || this.storageType;
+      if (_.isFunction(StorageType)){
+        storage = new StorageType();
+      } else {
+        storage = StorageType;
+      }
+
+      this.storage = storage;
+    }
+  });
+
+})(Wreqr);
+
+  // Wreqr.RequestResponse
+// ---------------------
+//
+// A simple request/response implementation. Register a
+// request handler, and return a response from it
+Wreqr.RequestResponse = (function(Wreqr){
+  "use strict";
+
+  return Wreqr.Handlers.extend({
+    request: function(){
+      var name = arguments[0];
+      var args = Array.prototype.slice.call(arguments, 1);
+
+      return this.getHandler(name).apply(this, args);
+    }
+  });
+
+})(Wreqr);
+
+  // Event Aggregator
+// ----------------
+// A pub-sub object that can be used to decouple various parts
+// of an application through event-driven architecture.
+
+Wreqr.EventAggregator = (function(Backbone, _){
+  "use strict";
+  var EA = function(){};
+
+  // Copy the `extend` function used by Backbone's classes
+  EA.extend = Backbone.Model.extend;
+
+  // Copy the basic Backbone.Events on to the event aggregator
+  _.extend(EA.prototype, Backbone.Events);
+
+  return EA;
+})(Backbone, _);
+
+
+  return Wreqr;
+})(Backbone, Backbone.Marionette, _);
+
+var Marionette = (function(global, Backbone, _){
+  "use strict";
+
+  // Define and export the Marionette namespace
+  var Marionette = {};
+  Backbone.Marionette = Marionette;
+
+  // Get the DOM manipulator for later use
+  Marionette.$ = Backbone.$;
+
+// Helpers
+// -------
+
+// For slicing `arguments` in functions
+var protoSlice = Array.prototype.slice;
+function slice(args) {
+  return protoSlice.call(args);
+}
+
+function throwError(message, name) {
+  var error = new Error(message);
+  error.name = name || 'Error';
+  throw error;
+}
+
+// Marionette.extend
+// -----------------
+
+// Borrow the Backbone `extend` method so we can use it as needed
+Marionette.extend = Backbone.Model.extend;
+
+// Marionette.getOption
+// --------------------
+
+// Retrieve an object, function or other value from a target
+// object or its `options`, with `options` taking precedence.
+Marionette.getOption = function(target, optionName){
+  if (!target || !optionName){ return; }
+  var value;
+
+  if (target.options && (optionName in target.options) && (target.options[optionName] !== undefined)){
+    value = target.options[optionName];
+  } else {
+    value = target[optionName];
+  }
+
+  return value;
+};
+
+// Trigger an event and a corresponding method name. Examples:
+//
+// `this.triggerMethod("foo")` will trigger the "foo" event and
+// call the "onFoo" method. 
+//
+// `this.triggerMethod("foo:bar") will trigger the "foo:bar" event and
+// call the "onFooBar" method.
+Marionette.triggerMethod = (function(){
+  
+  // split the event name on the :
+  var splitter = /(^|:)(\w)/gi;
+
+  // take the event section ("section1:section2:section3")
+  // and turn it in to uppercase name
+  function getEventName(match, prefix, eventName) { 
+    return eventName.toUpperCase();
+  }
+
+  // actual triggerMethod name
+  var triggerMethod = function(event) {
+    // get the method name from the event name
+    var methodName = 'on' + event.replace(splitter, getEventName);
+    var method = this[methodName];
+
+    // trigger the event
+    this.trigger.apply(this, arguments);
+
+    // call the onMethodName if it exists
+    if (_.isFunction(method)) {
+      // pass all arguments, except the event name
+      return method.apply(this, _.tail(arguments));
+    }
+  };
+
+  return triggerMethod;
+})();
+
+// DOMRefresh
+// ----------
+//
+// Monitor a view's state, and after it has been rendered and shown
+// in the DOM, trigger a "dom:refresh" event every time it is
+// re-rendered.
+
+Marionette.MonitorDOMRefresh = (function(){
+  // track when the view has been rendered
+  function handleShow(view){
+    view._isShown = true;
+    triggerDOMRefresh(view);
+  }
+
+  // track when the view has been shown in the DOM,
+  // using a Marionette.Region (or by other means of triggering "show")
+  function handleRender(view){
+    view._isRendered = true;
+    triggerDOMRefresh(view);
+  }
+
+  // Trigger the "dom:refresh" event and corresponding "onDomRefresh" method
+  function triggerDOMRefresh(view){
+    if (view._isShown && view._isRendered){
+      if (_.isFunction(view.triggerMethod)){
+        view.triggerMethod("dom:refresh");
+      }
+    }
+  }
+
+  // Export public API
+  return function(view){
+    view.listenTo(view, "show", function(){
+      handleShow(view);
+    });
+
+    view.listenTo(view, "render", function(){
+      handleRender(view);
+    });
+  };
+})();
+
+
+// Marionette.bindEntityEvents & unbindEntityEvents
+// ---------------------------
+//
+// These methods are used to bind/unbind a backbone "entity" (collection/model) 
+// to methods on a target object. 
+//
+// The first parameter, `target`, must have a `listenTo` method from the
+// EventBinder object.
+//
+// The second parameter is the entity (Backbone.Model or Backbone.Collection)
+// to bind the events from.
+//
+// The third parameter is a hash of { "event:name": "eventHandler" }
+// configuration. Multiple handlers can be separated by a space. A
+// function can be supplied instead of a string handler name. 
+
+(function(Marionette){
+  "use strict";
+
+  // Bind the event to handlers specified as a string of
+  // handler names on the target object
+  function bindFromStrings(target, entity, evt, methods){
+    var methodNames = methods.split(/\s+/);
+
+    _.each(methodNames,function(methodName) {
+
+      var method = target[methodName];
+      if(!method) {
+        throwError("Method '"+ methodName +"' was configured as an event handler, but does not exist.");
+      }
+
+      target.listenTo(entity, evt, method, target);
+    });
+  }
+
+  // Bind the event to a supplied callback function
+  function bindToFunction(target, entity, evt, method){
+      target.listenTo(entity, evt, method, target);
+  }
+
+  // Bind the event to handlers specified as a string of
+  // handler names on the target object
+  function unbindFromStrings(target, entity, evt, methods){
+    var methodNames = methods.split(/\s+/);
+
+    _.each(methodNames,function(methodName) {
+      var method = target[methodName];
+      target.stopListening(entity, evt, method, target);
+    });
+  }
+
+  // Bind the event to a supplied callback function
+  function unbindToFunction(target, entity, evt, method){
+      target.stopListening(entity, evt, method, target);
+  }
+
+  
+  // generic looping function
+  function iterateEvents(target, entity, bindings, functionCallback, stringCallback){
+    if (!entity || !bindings) { return; }
+
+    // allow the bindings to be a function
+    if (_.isFunction(bindings)){
+      bindings = bindings.call(target);
+    }
+
+    // iterate the bindings and bind them
+    _.each(bindings, function(methods, evt){
+
+      // allow for a function as the handler, 
+      // or a list of event names as a string
+      if (_.isFunction(methods)){
+        functionCallback(target, entity, evt, methods);
+      } else {
+        stringCallback(target, entity, evt, methods);
+      }
+
+    });
+  }
+ 
+  // Export Public API
+  Marionette.bindEntityEvents = function(target, entity, bindings){
+    iterateEvents(target, entity, bindings, bindToFunction, bindFromStrings);
+  };
+
+  Marionette.unbindEntityEvents = function(target, entity, bindings){
+    iterateEvents(target, entity, bindings, unbindToFunction, unbindFromStrings);
+  };
+
+})(Marionette);
+
+
+// Callbacks
+// ---------
+
+// A simple way of managing a collection of callbacks
+// and executing them at a later point in time, using jQuery's
+// `Deferred` object.
+Marionette.Callbacks = function(){
+  this._deferred = Marionette.$.Deferred();
+  this._callbacks = [];
+};
+
+_.extend(Marionette.Callbacks.prototype, {
+
+  // Add a callback to be executed. Callbacks added here are
+  // guaranteed to execute, even if they are added after the 
+  // `run` method is called.
+  add: function(callback, contextOverride){
+    this._callbacks.push({cb: callback, ctx: contextOverride});
+
+    this._deferred.done(function(context, options){
+      if (contextOverride){ context = contextOverride; }
+      callback.call(context, options);
+    });
+  },
+
+  // Run all registered callbacks with the context specified. 
+  // Additional callbacks can be added after this has been run 
+  // and they will still be executed.
+  run: function(options, context){
+    this._deferred.resolve(context, options);
+  },
+
+  // Resets the list of callbacks to be run, allowing the same list
+  // to be run multiple times - whenever the `run` method is called.
+  reset: function(){
+    var callbacks = this._callbacks;
+    this._deferred = Marionette.$.Deferred();
+    this._callbacks = [];
+    
+    _.each(callbacks, function(cb){
+      this.add(cb.cb, cb.ctx);
+    }, this);
+  }
+});
+
+
+// Marionette Controller
+// ---------------------
+//
+// A multi-purpose object to use as a controller for
+// modules and routers, and as a mediator for workflow
+// and coordination of other objects, views, and more.
+Marionette.Controller = function(options){
+  this.triggerMethod = Marionette.triggerMethod;
+  this.options = options || {};
+
+  if (_.isFunction(this.initialize)){
+    this.initialize(this.options);
+  }
+};
+
+Marionette.Controller.extend = Marionette.extend;
+
+// Controller Methods
+// --------------
+
+// Ensure it can trigger events with Backbone.Events
+_.extend(Marionette.Controller.prototype, Backbone.Events, {
+  close: function(){
+    this.stopListening();
+    this.triggerMethod("close");
+    this.unbind();
+  }
+});
+
+// Region 
+// ------
+//
+// Manage the visual regions of your composite application. See
+// http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
+
+Marionette.Region = function(options){
+  this.options = options || {};
+
+  this.el = Marionette.getOption(this, "el");
+
+  if (!this.el){
+    var err = new Error("An 'el' must be specified for a region.");
+    err.name = "NoElError";
+    throw err;
+  }
+
+  if (this.initialize){
+    var args = Array.prototype.slice.apply(arguments);
+    this.initialize.apply(this, args);
+  }
+};
+
+
+// Region Type methods
+// -------------------
+
+_.extend(Marionette.Region, {
+
+  // Build an instance of a region by passing in a configuration object
+  // and a default region type to use if none is specified in the config.
+  //
+  // The config object should either be a string as a jQuery DOM selector,
+  // a Region type directly, or an object literal that specifies both
+  // a selector and regionType:
+  //
+  // ```js
+  // {
+  //   selector: "#foo",
+  //   regionType: MyCustomRegion
+  // }
+  // ```
+  //
+  buildRegion: function(regionConfig, defaultRegionType){
+    var regionIsString = (typeof regionConfig === "string");
+    var regionSelectorIsString = (typeof regionConfig.selector === "string");
+    var regionTypeIsUndefined = (typeof regionConfig.regionType === "undefined");
+    var regionIsType = (typeof regionConfig === "function");
+
+    if (!regionIsType && !regionIsString && !regionSelectorIsString) {
+      throw new Error("Region must be specified as a Region type, a selector string or an object with selector property");
+    }
+
+    var selector, RegionType;
+   
+    // get the selector for the region
+    
+    if (regionIsString) {
+      selector = regionConfig;
+    } 
+
+    if (regionConfig.selector) {
+      selector = regionConfig.selector;
+    }
+
+    // get the type for the region
+    
+    if (regionIsType){
+      RegionType = regionConfig;
+    }
+
+    if (!regionIsType && regionTypeIsUndefined) {
+      RegionType = defaultRegionType;
+    }
+
+    if (regionConfig.regionType) {
+      RegionType = regionConfig.regionType;
+    }
+    
+    // build the region instance
+    var region = new RegionType({
+      el: selector
+    });
+
+    // override the `getEl` function if we have a parentEl
+    // this must be overridden to ensure the selector is found
+    // on the first use of the region. if we try to assign the
+    // region's `el` to `parentEl.find(selector)` in the object
+    // literal to build the region, the element will not be
+    // guaranteed to be in the DOM already, and will cause problems
+    if (regionConfig.parentEl){
+
+      region.getEl = function(selector) {
+        var parentEl = regionConfig.parentEl;
+        if (_.isFunction(parentEl)){
+          parentEl = parentEl();
+        }
+        return parentEl.find(selector);
+      };
+    }
+
+    return region;
+  }
+
+});
+
+// Region Instance Methods
+// -----------------------
+
+_.extend(Marionette.Region.prototype, Backbone.Events, {
+
+  // Displays a backbone view instance inside of the region.
+  // Handles calling the `render` method for you. Reads content
+  // directly from the `el` attribute. Also calls an optional
+  // `onShow` and `close` method on your view, just after showing
+  // or just before closing the view, respectively.
+  show: function(view){
+
+    this.ensureEl();
+
+    var isViewClosed = view.isClosed || _.isUndefined(view.$el);
+
+    var isDifferentView = view !== this.currentView;
+
+    if (isDifferentView) {
+      this.close();
+    }
+
+    view.render();
+
+    if (isDifferentView || isViewClosed) {
+      this.open(view);
+    }
+    
+    this.currentView = view;
+
+    Marionette.triggerMethod.call(this, "show", view);
+    Marionette.triggerMethod.call(view, "show");
+  },
+
+  ensureEl: function(){
+    if (!this.$el || this.$el.length === 0){
+      this.$el = this.getEl(this.el);
+    }
+  },
+
+  // Override this method to change how the region finds the
+  // DOM element that it manages. Return a jQuery selector object.
+  getEl: function(selector){
+    return Marionette.$(selector);
+  },
+
+  // Override this method to change how the new view is
+  // appended to the `$el` that the region is managing
+  open: function(view){
+    this.$el.empty().append(view.el);
+  },
+
+  // Close the current view, if there is one. If there is no
+  // current view, it does nothing and returns immediately.
+  close: function(){
+    var view = this.currentView;
+    if (!view || view.isClosed){ return; }
+
+    // call 'close' or 'remove', depending on which is found
+    if (view.close) { view.close(); }
+    else if (view.remove) { view.remove(); }
+
+    Marionette.triggerMethod.call(this, "close");
+
+    delete this.currentView;
+  },
+
+  // Attach an existing view to the region. This 
+  // will not call `render` or `onShow` for the new view, 
+  // and will not replace the current HTML for the `el`
+  // of the region.
+  attachView: function(view){
+    this.currentView = view;
+  },
+
+  // Reset the region by closing any existing view and
+  // clearing out the cached `$el`. The next time a view
+  // is shown via this region, the region will re-query the
+  // DOM for the region's `el`.
+  reset: function(){
+    this.close();
+    delete this.$el;
+  }
+});
+
+// Copy the `extend` function used by Backbone's classes
+Marionette.Region.extend = Marionette.extend;
+
+// Marionette.RegionManager
+// ------------------------
+//
+// Manage one or more related `Marionette.Region` objects.
+Marionette.RegionManager = (function(Marionette){
+
+  var RegionManager = Marionette.Controller.extend({
+    constructor: function(options){
+      this._regions = {};
+      Marionette.Controller.prototype.constructor.call(this, options);
+    },
+
+    // Add multiple regions using an object literal, where
+    // each key becomes the region name, and each value is
+    // the region definition.
+    addRegions: function(regionDefinitions, defaults){
+      var regions = {};
+
+      _.each(regionDefinitions, function(definition, name){
+        if (typeof definition === "string"){
+          definition = { selector: definition };
+        }
+
+        if (definition.selector){
+          definition = _.defaults({}, definition, defaults);
+        }
+
+        var region = this.addRegion(name, definition);
+        regions[name] = region;
+      }, this);
+
+      return regions;
+    },
+
+    // Add an individual region to the region manager,
+    // and return the region instance
+    addRegion: function(name, definition){
+      var region;
+
+      var isObject = _.isObject(definition);
+      var isString = _.isString(definition);
+      var hasSelector = !!definition.selector;
+
+      if (isString || (isObject && hasSelector)){
+        region = Marionette.Region.buildRegion(definition, Marionette.Region);
+      } else if (_.isFunction(definition)){
+        region = Marionette.Region.buildRegion(definition, Marionette.Region);
+      } else {
+        region = definition;
+      }
+
+      this._store(name, region);
+      this.triggerMethod("region:add", name, region);
+      return region;
+    },
+
+    // Get a region by name
+    get: function(name){
+      return this._regions[name];
+    },
+
+    // Remove a region by name
+    removeRegion: function(name){
+      var region = this._regions[name];
+      this._remove(name, region);
+    },
+
+    // Close all regions in the region manager, and
+    // remove them
+    removeRegions: function(){
+      _.each(this._regions, function(region, name){
+        this._remove(name, region);
+      }, this);
+    },
+
+    // Close all regions in the region manager, but
+    // leave them attached
+    closeRegions: function(){
+      _.each(this._regions, function(region, name){
+        region.close();
+      }, this);
+    },
+
+    // Close all regions and shut down the region
+    // manager entirely
+    close: function(){
+      this.removeRegions();
+      var args = Array.prototype.slice.call(arguments);
+      Marionette.Controller.prototype.close.apply(this, args);
+    },
+
+    // internal method to store regions
+    _store: function(name, region){
+      this._regions[name] = region;
+      this._setLength();
+    },
+
+    // internal method to remove a region
+    _remove: function(name, region){
+      region.close();
+      delete this._regions[name];
+      this._setLength();
+      this.triggerMethod("region:remove", name, region);
+    },
+
+    // set the number of regions current held
+    _setLength: function(){
+      this.length = _.size(this._regions);
+    }
+
+  });
+
+  // Borrowing this code from Backbone.Collection:
+  // http://backbonejs.org/docs/backbone.html#section-106
+  //
+  // Mix in methods from Underscore, for iteration, and other
+  // collection related features.
+  var methods = ['forEach', 'each', 'map', 'find', 'detect', 'filter', 
+    'select', 'reject', 'every', 'all', 'some', 'any', 'include', 
+    'contains', 'invoke', 'toArray', 'first', 'initial', 'rest', 
+    'last', 'without', 'isEmpty', 'pluck'];
+
+  _.each(methods, function(method) {
+    RegionManager.prototype[method] = function() {
+      var regions = _.values(this._regions);
+      var args = [regions].concat(_.toArray(arguments));
+      return _[method].apply(_, args);
+    };
+  });
+
+  return RegionManager;
+})(Marionette);
+
+
+// Template Cache
+// --------------
+
+// Manage templates stored in `<script>` blocks,
+// caching them for faster access.
+Marionette.TemplateCache = function(templateId){
+  this.templateId = templateId;
+};
+
+// TemplateCache object-level methods. Manage the template
+// caches from these method calls instead of creating 
+// your own TemplateCache instances
+_.extend(Marionette.TemplateCache, {
+  templateCaches: {},
+
+  // Get the specified template by id. Either
+  // retrieves the cached version, or loads it
+  // from the DOM.
+  get: function(templateId){
+    var cachedTemplate = this.templateCaches[templateId];
+
+    if (!cachedTemplate){
+      cachedTemplate = new Marionette.TemplateCache(templateId);
+      this.templateCaches[templateId] = cachedTemplate;
+    }
+
+    return cachedTemplate.load();
+  },
+
+  // Clear templates from the cache. If no arguments
+  // are specified, clears all templates:
+  // `clear()`
+  //
+  // If arguments are specified, clears each of the 
+  // specified templates from the cache:
+  // `clear("#t1", "#t2", "...")`
+  clear: function(){
+    var i;
+    var args = slice(arguments);
+    var length = args.length;
+
+    if (length > 0){
+      for(i=0; i<length; i++){
+        delete this.templateCaches[args[i]];
+      }
+    } else {
+      this.templateCaches = {};
+    }
+  }
+});
+
+// TemplateCache instance methods, allowing each
+// template cache object to manage its own state
+// and know whether or not it has been loaded
+_.extend(Marionette.TemplateCache.prototype, {
+
+  // Internal method to load the template
+  load: function(){
+    // Guard clause to prevent loading this template more than once
+    if (this.compiledTemplate){
+      return this.compiledTemplate;
+    }
+
+    // Load the template and compile it
+    var template = this.loadTemplate(this.templateId);
+    this.compiledTemplate = this.compileTemplate(template);
+
+    return this.compiledTemplate;
+  },
+
+  // Load a template from the DOM, by default. Override
+  // this method to provide your own template retrieval
+  // For asynchronous loading with AMD/RequireJS, consider
+  // using a template-loader plugin as described here: 
+  // https://github.com/marionettejs/backbone.marionette/wiki/Using-marionette-with-requirejs
+  loadTemplate: function(templateId){
+    var template = Marionette.$(templateId).html();
+
+    if (!template || template.length === 0){
+      throwError("Could not find template: '" + templateId + "'", "NoTemplateError");
+    }
+
+    return template;
+  },
+
+  // Pre-compile the template before caching it. Override
+  // this method if you do not need to pre-compile a template
+  // (JST / RequireJS for example) or if you want to change
+  // the template engine used (Handebars, etc).
+  compileTemplate: function(rawTemplate){
+    return _.template(rawTemplate);
+  }
+});
+
+
+// Renderer
+// --------
+
+// Render a template with data by passing in the template
+// selector and the data to render.
+Marionette.Renderer = {
+
+  // Render a template with data. The `template` parameter is
+  // passed to the `TemplateCache` object to retrieve the
+  // template function. Override this method to provide your own
+  // custom rendering and template handling for all of Marionette.
+  render: function(template, data){
+
+    if (!template) {
+      var error = new Error("Cannot render the template since it's false, null or undefined.");
+      error.name = "TemplateNotFoundError";
+      throw error;
+    }
+
+    var templateFunc;
+    if (typeof template === "function"){
+      templateFunc = template;
+    } else {
+      templateFunc = Marionette.TemplateCache.get(template);
+    }
+
+    return templateFunc(data);
+  }
+};
+
+
+
+// Marionette.View
+// ---------------
+
+// The core view type that other Marionette views extend from.
+Marionette.View = Backbone.View.extend({
+
+  constructor: function(){
+    _.bindAll(this, "render");
+
+    var args = Array.prototype.slice.apply(arguments);
+    Backbone.View.prototype.constructor.apply(this, args);
+
+    Marionette.MonitorDOMRefresh(this);
+    this.listenTo(this, "show", this.onShowCalled, this);
+  },
+
+  // import the "triggerMethod" to trigger events with corresponding
+  // methods if the method exists 
+  triggerMethod: Marionette.triggerMethod,
+
+  // Get the template for this view
+  // instance. You can set a `template` attribute in the view
+  // definition or pass a `template: "whatever"` parameter in
+  // to the constructor options.
+  getTemplate: function(){
+    return Marionette.getOption(this, "template");
+  },
+
+  // Mix in template helper methods. Looks for a
+  // `templateHelpers` attribute, which can either be an
+  // object literal, or a function that returns an object
+  // literal. All methods and attributes from this object
+  // are copies to the object passed in.
+  mixinTemplateHelpers: function(target){
+    target = target || {};
+    var templateHelpers = this.templateHelpers;
+    if (_.isFunction(templateHelpers)){
+      templateHelpers = templateHelpers.call(this);
+    }
+    return _.extend(target, templateHelpers);
+  },
+
+  // Configure `triggers` to forward DOM events to view
+  // events. `triggers: {"click .foo": "do:foo"}`
+  configureTriggers: function(){
+    if (!this.triggers) { return; }
+
+    var triggerEvents = {};
+
+    // Allow `triggers` to be configured as a function
+    var triggers = _.result(this, "triggers");
+
+    // Configure the triggers, prevent default
+    // action and stop propagation of DOM events
+    _.each(triggers, function(value, key){
+
+      // build the event handler function for the DOM event
+      triggerEvents[key] = function(e){
+
+        // stop the event in its tracks
+        if (e && e.preventDefault){ e.preventDefault(); }
+        if (e && e.stopPropagation){ e.stopPropagation(); }
+
+        // build the args for the event
+        var args = {
+          view: this,
+          model: this.model,
+          collection: this.collection
+        };
+
+        // trigger the event
+        this.triggerMethod(value, args);
+      };
+
+    }, this);
+
+    return triggerEvents;
+  },
+
+  // Overriding Backbone.View's delegateEvents to handle 
+  // the `triggers`, `modelEvents`, and `collectionEvents` configuration
+  delegateEvents: function(events){
+    this._delegateDOMEvents(events);
+    Marionette.bindEntityEvents(this, this.model, Marionette.getOption(this, "modelEvents"));
+    Marionette.bindEntityEvents(this, this.collection, Marionette.getOption(this, "collectionEvents"));
+  },
+
+  // internal method to delegate DOM events and triggers
+  _delegateDOMEvents: function(events){
+    events = events || this.events;
+    if (_.isFunction(events)){ events = events.call(this); }
+
+    var combinedEvents = {};
+    var triggers = this.configureTriggers();
+    _.extend(combinedEvents, events, triggers);
+
+    Backbone.View.prototype.delegateEvents.call(this, combinedEvents);
+  },
+
+  // Overriding Backbone.View's undelegateEvents to handle unbinding
+  // the `triggers`, `modelEvents`, and `collectionEvents` config
+  undelegateEvents: function(){
+    var args = Array.prototype.slice.call(arguments);
+    Backbone.View.prototype.undelegateEvents.apply(this, args);
+
+    Marionette.unbindEntityEvents(this, this.model, Marionette.getOption(this, "modelEvents"));
+    Marionette.unbindEntityEvents(this, this.collection, Marionette.getOption(this, "collectionEvents"));
+  },
+
+  // Internal method, handles the `show` event.
+  onShowCalled: function(){},
+
+  // Default `close` implementation, for removing a view from the
+  // DOM and unbinding it. Regions will call this method
+  // for you. You can specify an `onClose` method in your view to
+  // add custom code that is called after the view is closed.
+  close: function(){
+    if (this.isClosed) { return; }
+
+    // allow the close to be stopped by returning `false`
+    // from the `onBeforeClose` method
+    var shouldClose = this.triggerMethod("before:close");
+    if (shouldClose === false){
+      return;
+    }
+
+    // mark as closed before doing the actual close, to
+    // prevent infinite loops within "close" event handlers
+    // that are trying to close other views
+    this.isClosed = true;
+    this.triggerMethod("close");
+
+    // unbind UI elements
+    this.unbindUIElements();
+
+    // remove the view from the DOM
+    this.remove();
+  },
+
+  // This method binds the elements specified in the "ui" hash inside the view's code with
+  // the associated jQuery selectors.
+  bindUIElements: function(){
+    if (!this.ui) { return; }
+
+    // store the ui hash in _uiBindings so they can be reset later
+    // and so re-rendering the view will be able to find the bindings
+    if (!this._uiBindings){
+      this._uiBindings = this.ui;
+    }
+
+    // get the bindings result, as a function or otherwise
+    var bindings = _.result(this, "_uiBindings");
+
+    // empty the ui so we don't have anything to start with
+    this.ui = {};
+
+    // bind each of the selectors
+    _.each(_.keys(bindings), function(key) {
+      var selector = bindings[key];
+      this.ui[key] = this.$(selector);
+    }, this);
+  },
+
+  // This method unbinds the elements specified in the "ui" hash
+  unbindUIElements: function(){
+    if (!this.ui){ return; }
+
+    // delete all of the existing ui bindings
+    _.each(this.ui, function($el, name){
+      delete this.ui[name];
+    }, this);
+
+    // reset the ui element to the original bindings configuration
+    this.ui = this._uiBindings;
+    delete this._uiBindings;
+  }
+});
+
+// Item View
+// ---------
+
+// A single item view implementation that contains code for rendering
+// with underscore.js templates, serializing the view's model or collection,
+// and calling several methods on extended views, such as `onRender`.
+Marionette.ItemView =  Marionette.View.extend({
+
+  // Serialize the model or collection for the view. If a model is
+  // found, `.toJSON()` is called. If a collection is found, `.toJSON()`
+  // is also called, but is used to populate an `items` array in the
+  // resulting data. If both are found, defaults to the model.
+  // You can override the `serializeData` method in your own view
+  // definition, to provide custom serialization for your view's data.
+  serializeData: function(){
+    var data = {};
+
+    if (this.model) {
+      data = this.model.toJSON();
+    }
+    else if (this.collection) {
+      data = { items: this.collection.toJSON() };
+    }
+
+    return data;
+  },
+
+  // Render the view, defaulting to underscore.js templates.
+  // You can override this in your view definition to provide
+  // a very specific rendering for your view. In general, though,
+  // you should override the `Marionette.Renderer` object to
+  // change how Marionette renders views.
+  render: function(){
+    this.isClosed = false;
+
+    this.triggerMethod("before:render", this);
+    this.triggerMethod("item:before:render", this);
+
+    var data = this.serializeData();
+    data = this.mixinTemplateHelpers(data);
+
+    var template = this.getTemplate();
+    var html = Marionette.Renderer.render(template, data);
+
+    this.$el.html(html);
+    this.bindUIElements();
+
+    this.triggerMethod("render", this);
+    this.triggerMethod("item:rendered", this);
+
+    return this;
+  },
+
+  // Override the default close event to add a few
+  // more events that are triggered.
+  close: function(){
+    if (this.isClosed){ return; }
+
+    this.triggerMethod('item:before:close');
+
+    Marionette.View.prototype.close.apply(this, slice(arguments));
+
+    this.triggerMethod('item:closed');
+  }
+});
+
+// Collection View
+// ---------------
+
+// A view that iterates over a Backbone.Collection
+// and renders an individual ItemView for each model.
+Marionette.CollectionView = Marionette.View.extend({
+  // used as the prefix for item view events
+  // that are forwarded through the collectionview
+  itemViewEventPrefix: "itemview",
+
+  // constructor
+  constructor: function(options){
+    this._initChildViewStorage();
+
+    Marionette.View.prototype.constructor.apply(this, slice(arguments));
+
+    this._initialEvents();
+  },
+
+  // Configured the initial events that the collection view
+  // binds to. Override this method to prevent the initial
+  // events, or to add your own initial events.
+  _initialEvents: function(){
+    if (this.collection){
+      this.listenTo(this.collection, "add", this.addChildView, this);
+      this.listenTo(this.collection, "remove", this.removeItemView, this);
+      this.listenTo(this.collection, "reset", this.render, this);
+    }
+  },
+
+  // Handle a child item added to the collection
+  addChildView: function(item, collection, options){
+    this.closeEmptyView();
+    var ItemView = this.getItemView(item);
+    var index = this.collection.indexOf(item);
+    this.addItemView(item, ItemView, index);
+  },
+
+  // Override from `Marionette.View` to guarantee the `onShow` method
+  // of child views is called.
+  onShowCalled: function(){
+    this.children.each(function(child){
+      Marionette.triggerMethod.call(child, "show");
+    });
+  },
+
+  // Internal method to trigger the before render callbacks
+  // and events
+  triggerBeforeRender: function(){
+    this.triggerMethod("before:render", this);
+    this.triggerMethod("collection:before:render", this);
+  },
+
+  // Internal method to trigger the rendered callbacks and
+  // events
+  triggerRendered: function(){
+    this.triggerMethod("render", this);
+    this.triggerMethod("collection:rendered", this);
+  },
+
+  // Render the collection of items. Override this method to
+  // provide your own implementation of a render function for
+  // the collection view.
+  render: function(){
+    this.isClosed = false;
+    this.triggerBeforeRender();
+    this._renderChildren();
+    this.triggerRendered();
+    return this;
+  },
+
+  // Internal method. Separated so that CompositeView can have
+  // more control over events being triggered, around the rendering
+  // process
+  _renderChildren: function(){
+    this.closeEmptyView();
+    this.closeChildren();
+
+    if (this.collection && this.collection.length > 0) {
+      this.showCollection();
+    } else {
+      this.showEmptyView();
+    }
+  },
+
+  // Internal method to loop through each item in the
+  // collection view and show it
+  showCollection: function(){
+    var ItemView;
+    this.collection.each(function(item, index){
+      ItemView = this.getItemView(item);
+      this.addItemView(item, ItemView, index);
+    }, this);
+  },
+
+  // Internal method to show an empty view in place of
+  // a collection of item views, when the collection is
+  // empty
+  showEmptyView: function(){
+    var EmptyView = Marionette.getOption(this, "emptyView");
+
+    if (EmptyView && !this._showingEmptyView){
+      this._showingEmptyView = true;
+      var model = new Backbone.Model();
+      this.addItemView(model, EmptyView, 0);
+    }
+  },
+
+  // Internal method to close an existing emptyView instance
+  // if one exists. Called when a collection view has been
+  // rendered empty, and then an item is added to the collection.
+  closeEmptyView: function(){
+    if (this._showingEmptyView){
+      this.closeChildren();
+      delete this._showingEmptyView;
+    }
+  },
+
+  // Retrieve the itemView type, either from `this.options.itemView`
+  // or from the `itemView` in the object definition. The "options"
+  // takes precedence.
+  getItemView: function(item){
+    var itemView = Marionette.getOption(this, "itemView");
+
+    if (!itemView){
+      throwError("An `itemView` must be specified", "NoItemViewError");
+    }
+
+    return itemView;
+  },
+
+  // Render the child item's view and add it to the
+  // HTML for the collection view.
+  addItemView: function(item, ItemView, index){
+    // get the itemViewOptions if any were specified
+    var itemViewOptions = Marionette.getOption(this, "itemViewOptions");
+    if (_.isFunction(itemViewOptions)){
+      itemViewOptions = itemViewOptions.call(this, item, index);
+    }
+
+    // build the view 
+    var view = this.buildItemView(item, ItemView, itemViewOptions);
+    
+    // set up the child view event forwarding
+    this.addChildViewEventForwarding(view);
+
+    // this view is about to be added
+    this.triggerMethod("before:item:added", view);
+
+    // Store the child view itself so we can properly
+    // remove and/or close it later
+    this.children.add(view);
+
+    // Render it and show it
+    this.renderItemView(view, index);
+
+    // call the "show" method if the collection view
+    // has already been shown
+    if (this._isShown){
+      Marionette.triggerMethod.call(view, "show");
+    }
+
+    // this view was added
+    this.triggerMethod("after:item:added", view);
+  },
+
+  // Set up the child view event forwarding. Uses an "itemview:"
+  // prefix in front of all forwarded events.
+  addChildViewEventForwarding: function(view){
+    var prefix = Marionette.getOption(this, "itemViewEventPrefix");
+
+    // Forward all child item view events through the parent,
+    // prepending "itemview:" to the event name
+    this.listenTo(view, "all", function(){
+      var args = slice(arguments);
+      args[0] = prefix + ":" + args[0];
+      args.splice(1, 0, view);
+
+      Marionette.triggerMethod.apply(this, args);
+    }, this);
+  },
+
+  // render the item view
+  renderItemView: function(view, index) {
+    view.render();
+    this.appendHtml(this, view, index);
+  },
+
+  // Build an `itemView` for every model in the collection.
+  buildItemView: function(item, ItemViewType, itemViewOptions){
+    var options = _.extend({model: item}, itemViewOptions);
+    return new ItemViewType(options);
+  },
+
+  // get the child view by item it holds, and remove it
+  removeItemView: function(item){
+    var view = this.children.findByModel(item);
+    this.removeChildView(view);
+    this.checkEmpty();
+  },
+
+  // Remove the child view and close it
+  removeChildView: function(view){
+
+    // shut down the child view properly,
+    // including events that the collection has from it
+    if (view){
+      this.stopListening(view);
+
+      // call 'close' or 'remove', depending on which is found
+      if (view.close) { view.close(); }
+      else if (view.remove) { view.remove(); }
+
+      this.children.remove(view);
+    }
+
+    this.triggerMethod("item:removed", view);
+  },
+
+  // helper to show the empty view if the collection is empty
+  checkEmpty: function() {
+    // check if we're empty now, and if we are, show the
+    // empty view
+    if (!this.collection || this.collection.length === 0){
+      this.showEmptyView();
+    }
+  },
+
+  // Append the HTML to the collection's `el`.
+  // Override this method to do something other
+  // then `.append`.
+  appendHtml: function(collectionView, itemView, index){
+    collectionView.$el.append(itemView.el);
+  },
+
+  // Internal method to set up the `children` object for
+  // storing all of the child views
+  _initChildViewStorage: function(){
+    this.children = new Backbone.ChildViewContainer();
+  },
+
+  // Handle cleanup and other closing needs for
+  // the collection of views.
+  close: function(){
+    if (this.isClosed){ return; }
+
+    this.triggerMethod("collection:before:close");
+    this.closeChildren();
+    this.triggerMethod("collection:closed");
+
+    Marionette.View.prototype.close.apply(this, slice(arguments));
+  },
+
+  // Close the child views that this collection view
+  // is holding on to, if any
+  closeChildren: function(){
+    this.children.each(function(child){
+      this.removeChildView(child);
+    }, this);
+    this.checkEmpty();
+  }
+});
+
+
+// Composite View
+// --------------
+
+// Used for rendering a branch-leaf, hierarchical structure.
+// Extends directly from CollectionView and also renders an
+// an item view as `modelView`, for the top leaf
+Marionette.CompositeView = Marionette.CollectionView.extend({
+
+  // Configured the initial events that the composite view
+  // binds to. Override this method to prevent the initial
+  // events, or to add your own initial events.
+  _initialEvents: function(){
+    if (this.collection){
+      this.listenTo(this.collection, "add", this.addChildView, this);
+      this.listenTo(this.collection, "remove", this.removeItemView, this);
+      this.listenTo(this.collection, "reset", this._renderChildren, this);
+    }
+  },
+
+  // Retrieve the `itemView` to be used when rendering each of
+  // the items in the collection. The default is to return
+  // `this.itemView` or Marionette.CompositeView if no `itemView`
+  // has been defined
+  getItemView: function(item){
+    var itemView = Marionette.getOption(this, "itemView") || this.constructor;
+
+    if (!itemView){
+      throwError("An `itemView` must be specified", "NoItemViewError");
+    }
+
+    return itemView;
+  },
+
+  // Serialize the collection for the view. 
+  // You can override the `serializeData` method in your own view
+  // definition, to provide custom serialization for your view's data.
+  serializeData: function(){
+    var data = {};
+
+    if (this.model){
+      data = this.model.toJSON();
+    }
+
+    return data;
+  },
+
+  // Renders the model once, and the collection once. Calling
+  // this again will tell the model's view to re-render itself
+  // but the collection will not re-render.
+  render: function(){
+    this.isRendered = true;
+    this.isClosed = false;
+    this.resetItemViewContainer();
+
+    this.triggerBeforeRender();
+    var html = this.renderModel();
+    this.$el.html(html);
+    // the ui bindings is done here and not at the end of render since they 
+    // will not be available until after the model is rendered, but should be
+    // available before the collection is rendered.
+    this.bindUIElements();
+    this.triggerMethod("composite:model:rendered");
+
+    this._renderChildren();
+
+    this.triggerMethod("composite:rendered");
+    this.triggerRendered();
+    return this;
+  },
+
+  _renderChildren: function(){
+    if (this.isRendered){
+      Marionette.CollectionView.prototype._renderChildren.call(this);
+      this.triggerMethod("composite:collection:rendered");
+    }
+  },
+
+  // Render an individual model, if we have one, as
+  // part of a composite view (branch / leaf). For example:
+  // a treeview.
+  renderModel: function(){
+    var data = {};
+    data = this.serializeData();
+    data = this.mixinTemplateHelpers(data);
+
+    var template = this.getTemplate();
+    return Marionette.Renderer.render(template, data);
+  },
+
+  // Appends the `el` of itemView instances to the specified
+  // `itemViewContainer` (a jQuery selector). Override this method to
+  // provide custom logic of how the child item view instances have their
+  // HTML appended to the composite view instance.
+  appendHtml: function(cv, iv, index){
+    var $container = this.getItemViewContainer(cv);
+    $container.append(iv.el);
+  },
+
+  // Internal method to ensure an `$itemViewContainer` exists, for the
+  // `appendHtml` method to use.
+  getItemViewContainer: function(containerView){
+    if ("$itemViewContainer" in containerView){
+      return containerView.$itemViewContainer;
+    }
+
+    var container;
+    if (containerView.itemViewContainer){
+
+      var selector = _.result(containerView, "itemViewContainer");
+      container = containerView.$(selector);
+      if (container.length <= 0) {
+        throwError("The specified `itemViewContainer` was not found: " + containerView.itemViewContainer, "ItemViewContainerMissingError");
+      }
+
+    } else {
+      container = containerView.$el;
+    }
+
+    containerView.$itemViewContainer = container;
+    return container;
+  },
+
+  // Internal method to reset the `$itemViewContainer` on render
+  resetItemViewContainer: function(){
+    if (this.$itemViewContainer){
+      delete this.$itemViewContainer;
+    }
+  }
+});
+
+
+// Layout
+// ------
+
+// Used for managing application layouts, nested layouts and
+// multiple regions within an application or sub-application.
+//
+// A specialized view type that renders an area of HTML and then
+// attaches `Region` instances to the specified `regions`.
+// Used for composite view management and sub-application areas.
+Marionette.Layout = Marionette.ItemView.extend({
+  regionType: Marionette.Region,
+  
+  // Ensure the regions are available when the `initialize` method
+  // is called.
+  constructor: function (options) {
+    options = options || {};
+
+    this._firstRender = true;
+    this._initializeRegions(options);
+    
+    Marionette.ItemView.call(this, options);
+  },
+
+  // Layout's render will use the existing region objects the
+  // first time it is called. Subsequent calls will close the
+  // views that the regions are showing and then reset the `el`
+  // for the regions to the newly rendered DOM elements.
+  render: function(){
+
+    if (this._firstRender){
+      // if this is the first render, don't do anything to
+      // reset the regions
+      this._firstRender = false;
+    } else if (this.isClosed){
+      // a previously closed layout means we need to 
+      // completely re-initialize the regions
+      this._initializeRegions();
+    } else {
+      // If this is not the first render call, then we need to 
+      // re-initializing the `el` for each region
+      this._reInitializeRegions();
+    }
+
+    var args = Array.prototype.slice.apply(arguments);
+    var result = Marionette.ItemView.prototype.render.apply(this, args);
+
+    return result;
+  },
+
+  // Handle closing regions, and then close the view itself.
+  close: function () {
+    if (this.isClosed){ return; }
+    this.regionManager.close();
+    var args = Array.prototype.slice.apply(arguments);
+    Marionette.ItemView.prototype.close.apply(this, args);
+  },
+
+  // Add a single region, by name, to the layout
+  addRegion: function(name, definition){
+    var regions = {};
+    regions[name] = definition;
+    return this.addRegions(regions)[name];
+  },
+
+  // Add multiple regions as a {name: definition, name2: def2} object literal
+  addRegions: function(regions){
+    this.regions = _.extend(this.regions || {}, regions);
+    return this._buildRegions(regions);
+  },
+
+  // Remove a single region from the Layout, by name
+  removeRegion: function(name){
+    return this.regionManager.removeRegion(name);
+  },
+
+  // internal method to build regions
+  _buildRegions: function(regions){
+    var that = this;
+
+    var defaults = {
+      parentEl: function(){ return that.$el; }
+    };
+
+    return this.regionManager.addRegions(regions, defaults);
+  },
+
+  // Internal method to initialize the regions that have been defined in a
+  // `regions` attribute on this layout. 
+  _initializeRegions: function (options) {
+    var regions;
+    this._initRegionManager();
+
+    if (_.isFunction(this.regions)) {
+      regions = this.regions(options);
+    } else {
+      regions = this.regions || {};
+    }
+
+    this.addRegions(regions);
+  },
+
+  // Internal method to re-initialize all of the regions by updating the `el` that
+  // they point to
+  _reInitializeRegions: function(){
+    this.regionManager.closeRegions();
+    this.regionManager.each(function(region){
+      region.reset();
+    });
+  },
+
+  // Internal method to initialize the region manager
+  // and all regions in it
+  _initRegionManager: function(){
+    this.regionManager = new Marionette.RegionManager();
+
+    this.listenTo(this.regionManager, "region:add", function(name, region){
+      this[name] = region;
+      this.trigger("region:add", name, region);
+    });
+
+    this.listenTo(this.regionManager, "region:remove", function(name, region){
+      delete this[name];
+      this.trigger("region:remove", name, region);
+    });
+  }
+});
+
+
+// AppRouter
+// ---------
+
+// Reduce the boilerplate code of handling route events
+// and then calling a single method on another object.
+// Have your routers configured to call the method on
+// your object, directly.
+//
+// Configure an AppRouter with `appRoutes`.
+//
+// App routers can only take one `controller` object. 
+// It is recommended that you divide your controller
+// objects in to smaller pieces of related functionality
+// and have multiple routers / controllers, instead of
+// just one giant router and controller.
+//
+// You can also add standard routes to an AppRouter.
+
+Marionette.AppRouter = Backbone.Router.extend({
+
+  constructor: function(options){
+    Backbone.Router.prototype.constructor.apply(this, slice(arguments));
+
+    this.options = options;
+
+    if (this.appRoutes){
+      var controller = Marionette.getOption(this, "controller");
+      this.processAppRoutes(controller, this.appRoutes);
+    }
+  },
+
+  // Internal method to process the `appRoutes` for the
+  // router, and turn them in to routes that trigger the
+  // specified method on the specified `controller`.
+  processAppRoutes: function(controller, appRoutes) {
+    var routeNames = _.keys(appRoutes).reverse(); // Backbone requires reverted order of routes
+
+    _.each(routeNames, function(route) {
+      var methodName = appRoutes[route];
+      var method = controller[methodName];
+
+      if (!method) {
+        throw new Error("Method '" + methodName + "' was not found on the controller");
+      }
+
+      this.route(route, methodName, _.bind(method, controller));
+    }, this);
+  }
+});
+
+
+// Application
+// -----------
+
+// Contain and manage the composite application as a whole.
+// Stores and starts up `Region` objects, includes an
+// event aggregator as `app.vent`
+Marionette.Application = function(options){
+  this._initRegionManager();
+  this._initCallbacks = new Marionette.Callbacks();
+  this.vent = new Backbone.Wreqr.EventAggregator();
+  this.commands = new Backbone.Wreqr.Commands();
+  this.reqres = new Backbone.Wreqr.RequestResponse();
+  this.submodules = {};
+
+  _.extend(this, options);
+
+  this.triggerMethod = Marionette.triggerMethod;
+};
+
+_.extend(Marionette.Application.prototype, Backbone.Events, {
+  // Command execution, facilitated by Backbone.Wreqr.Commands
+  execute: function(){
+    var args = Array.prototype.slice.apply(arguments);
+    this.commands.execute.apply(this.commands, args);
+  },
+
+  // Request/response, facilitated by Backbone.Wreqr.RequestResponse
+  request: function(){
+    var args = Array.prototype.slice.apply(arguments);
+    return this.reqres.request.apply(this.reqres, args);
+  },
+
+  // Add an initializer that is either run at when the `start`
+  // method is called, or run immediately if added after `start`
+  // has already been called.
+  addInitializer: function(initializer){
+    this._initCallbacks.add(initializer);
+  },
+
+  // kick off all of the application's processes.
+  // initializes all of the regions that have been added
+  // to the app, and runs all of the initializer functions
+  start: function(options){
+    this.triggerMethod("initialize:before", options);
+    this._initCallbacks.run(options, this);
+    this.triggerMethod("initialize:after", options);
+
+    this.triggerMethod("start", options);
+  },
+
+  // Add regions to your app. 
+  // Accepts a hash of named strings or Region objects
+  // addRegions({something: "#someRegion"})
+  // addRegions({something: Region.extend({el: "#someRegion"}) });
+  addRegions: function(regions){
+    return this._regionManager.addRegions(regions);
+  },
+
+  // Removes a region from your app.
+  // Accepts the regions name
+  // removeRegion('myRegion')
+  removeRegion: function(region) {
+    this._regionManager.removeRegion(region);
+  },
+
+  // Create a module, attached to the application
+  module: function(moduleNames, moduleDefinition){
+    // slice the args, and add this application object as the
+    // first argument of the array
+    var args = slice(arguments);
+    args.unshift(this);
+
+    // see the Marionette.Module object for more information
+    return Marionette.Module.create.apply(Marionette.Module, args);
+  },
+
+  // Internal method to set up the region manager
+  _initRegionManager: function(){
+    this._regionManager = new Marionette.RegionManager();
+
+    this.listenTo(this._regionManager, "region:add", function(name, region){
+      this[name] = region;
+    });
+
+    this.listenTo(this._regionManager, "region:remove", function(name, region){
+      delete this[name];
+    });
+  }
+});
+
+// Copy the `extend` function used by Backbone's classes
+Marionette.Application.extend = Marionette.extend;
+
+// Module
+// ------
+
+// A simple module system, used to create privacy and encapsulation in
+// Marionette applications
+Marionette.Module = function(moduleName, app){
+  this.moduleName = moduleName;
+
+  // store sub-modules
+  this.submodules = {};
+
+  this._setupInitializersAndFinalizers();
+
+  // store the configuration for this module
+  this.app = app;
+  this.startWithParent = true;
+
+  this.triggerMethod = Marionette.triggerMethod;
+};
+
+// Extend the Module prototype with events / listenTo, so that the module
+// can be used as an event aggregator or pub/sub.
+_.extend(Marionette.Module.prototype, Backbone.Events, {
+
+  // Initializer for a specific module. Initializers are run when the
+  // module's `start` method is called.
+  addInitializer: function(callback){
+    this._initializerCallbacks.add(callback);
+  },
+
+  // Finalizers are run when a module is stopped. They are used to teardown
+  // and finalize any variables, references, events and other code that the
+  // module had set up.
+  addFinalizer: function(callback){
+    this._finalizerCallbacks.add(callback);
+  },
+
+  // Start the module, and run all of its initializers
+  start: function(options){
+    // Prevent re-starting a module that is already started
+    if (this._isInitialized){ return; }
+
+    // start the sub-modules (depth-first hierarchy)
+    _.each(this.submodules, function(mod){
+      // check to see if we should start the sub-module with this parent
+      if (mod.startWithParent){
+        mod.start(options);
+      }
+    });
+
+    // run the callbacks to "start" the current module
+    this.triggerMethod("before:start", options);
+
+    this._initializerCallbacks.run(options, this);
+    this._isInitialized = true;
+
+    this.triggerMethod("start", options);
+  },
+
+  // Stop this module by running its finalizers and then stop all of
+  // the sub-modules for this module
+  stop: function(){
+    // if we are not initialized, don't bother finalizing
+    if (!this._isInitialized){ return; }
+    this._isInitialized = false;
+
+    Marionette.triggerMethod.call(this, "before:stop");
+
+    // stop the sub-modules; depth-first, to make sure the
+    // sub-modules are stopped / finalized before parents
+    _.each(this.submodules, function(mod){ mod.stop(); });
+
+    // run the finalizers
+    this._finalizerCallbacks.run(undefined,this);
+
+    // reset the initializers and finalizers
+    this._initializerCallbacks.reset();
+    this._finalizerCallbacks.reset();
+
+    Marionette.triggerMethod.call(this, "stop");
+  },
+
+  // Configure the module with a definition function and any custom args
+  // that are to be passed in to the definition function
+  addDefinition: function(moduleDefinition, customArgs){
+    this._runModuleDefinition(moduleDefinition, customArgs);
+  },
+
+  // Internal method: run the module definition function with the correct
+  // arguments
+  _runModuleDefinition: function(definition, customArgs){
+    if (!definition){ return; }
+
+    // build the correct list of arguments for the module definition
+    var args = _.flatten([
+      this,
+      this.app,
+      Backbone,
+      Marionette,
+      Marionette.$, _,
+      customArgs
+    ]);
+
+    definition.apply(this, args);
+  },
+
+  // Internal method: set up new copies of initializers and finalizers.
+  // Calling this method will wipe out all existing initializers and
+  // finalizers.
+  _setupInitializersAndFinalizers: function(){
+    this._initializerCallbacks = new Marionette.Callbacks();
+    this._finalizerCallbacks = new Marionette.Callbacks();
+  }
+});
+
+// Type methods to create modules
+_.extend(Marionette.Module, {
+
+  // Create a module, hanging off the app parameter as the parent object.
+  create: function(app, moduleNames, moduleDefinition){
+    var module = app;
+
+    // get the custom args passed in after the module definition and
+    // get rid of the module name and definition function
+    var customArgs = slice(arguments);
+    customArgs.splice(0, 3);
+
+    // split the module names and get the length
+    moduleNames = moduleNames.split(".");
+    var length = moduleNames.length;
+
+    // store the module definition for the last module in the chain
+    var moduleDefinitions = [];
+    moduleDefinitions[length-1] = moduleDefinition;
+
+    // Loop through all the parts of the module definition
+    _.each(moduleNames, function(moduleName, i){
+      var parentModule = module;
+      module = this._getModule(parentModule, moduleName, app);
+      this._addModuleDefinition(parentModule, module, moduleDefinitions[i], customArgs);
+    }, this);
+
+    // Return the last module in the definition chain
+    return module;
+  },
+
+  _getModule: function(parentModule, moduleName, app, def, args){
+    // Get an existing module of this name if we have one
+    var module = parentModule[moduleName];
+
+    if (!module){
+      // Create a new module if we don't have one
+      module = new Marionette.Module(moduleName, app);
+      parentModule[moduleName] = module;
+      // store the module on the parent
+      parentModule.submodules[moduleName] = module;
+    }
+
+    return module;
+  },
+
+  _addModuleDefinition: function(parentModule, module, def, args){
+    var fn; 
+    var startWithParent;
+
+    if (_.isFunction(def)){
+      // if a function is supplied for the module definition
+      fn = def;
+      startWithParent = true;
+
+    } else if (_.isObject(def)){
+      // if an object is supplied
+      fn = def.define;
+      startWithParent = def.startWithParent;
+      
+    } else {
+      // if nothing is supplied
+      startWithParent = true;
+    }
+
+    // add module definition if needed
+    if (fn){
+      module.addDefinition(fn, args);
+    }
+
+    // `and` the two together, ensuring a single `false` will prevent it
+    // from starting with the parent
+    module.startWithParent = module.startWithParent && startWithParent;
+
+    // setup auto-start if needed
+    if (module.startWithParent && !module.startWithParentIsConfigured){
+
+      // only configure this once
+      module.startWithParentIsConfigured = true;
+
+      // add the module initializer config
+      parentModule.addInitializer(function(options){
+        if (module.startWithParent){
+          module.start(options);
+        }
+      });
+
+    }
+
+  }
+});
+
+
+
+  return Marionette;
+})(this, Backbone, _);

labs/dependency-examples/backbone_marionette_require/js/lib/backbone.js → labs/dependency-examples/backbone_marionette_require/bower_components/backbone/backbone.js

-//     Backbone.js 0.9.2
+//     Backbone.js 1.0.0
 
-//     (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc.
+//     (c) 2010-2013 Jeremy Ashkenas, DocumentCloud Inc.
 //     Backbone may be freely distributed under the MIT license.
 //     For all details and documentation:
 //     http://backbonejs.org
@@ -10,7 +10,7 @@
   // Initial Setup
   // -------------
 
-  // Save a reference to the global object (`window` in the browser, `global`
+  // Save a reference to the global object (`window` in the browser, `exports`
   // on the server).
   var root = this;
 
@@ -18,12 +18,14 @@
   // restored later on, if `noConflict` is used.
   var previousBackbone = root.Backbone;
 
-  // Create a local reference to slice/splice.
-  var slice = Array.prototype.slice;
-  var splice = Array.prototype.splice;
+  // Create local references to array methods we'll want to use later.
+  var array = [];
+  var push = array.push;
+  var slice = array.slice;
+  var splice = array.splice;
 
   // The top-level namespace. All public Backbone classes and modules will
-  // be attached to this. Exported for both CommonJS and the browser.
+  // be attached to this. Exported for both the browser and the server.
   var Backbone;
   if (typeof exports !== 'undefined') {
     Backbone = exports;
@@ -32,23 +34,15 @@
   }
 
   // Current version of the library. Keep in sync with `package.json`.
-  Backbone.VERSION = '0.9.2';
+  Backbone.VERSION = '1.0.0';
 
   // Require Underscore, if we're on the server, and it's not already present.
   var _ = root._;
   if (!_ && (typeof require !== 'undefined')) _ = require('underscore');
 
-  // For Backbone's purposes, jQuery, Zepto, or Ender owns the `$` variable.
-  var $ = root.jQuery || root.Zepto || root.ender;
-
-  // Set the JavaScript library that will be used for DOM manipulation and
-  // Ajax calls (a.k.a. the `$` variable). By default Backbone will use: jQuery,
-  // Zepto, or Ender; but the `setDomLibrary()` method lets you inject an
-  // alternate JavaScript library (or a mock library for testing your views
-  // outside of a browser).
-  Backbone.setDomLibrary = function(lib) {
-    $ = lib;
-  };
+  // For Backbone's purposes, jQuery, Zepto, Ender, or My Library (kidding) owns
+  // the `$` variable.
+  Backbone.$ = root.jQuery || root.Zepto || root.ender || root.$;
 
   // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable
   // to its previous owner. Returns a reference to this Backbone object.
@@ -69,14 +63,12 @@
   Backbone.emulateJSON = false;
 
   // Backbone.Events
-  // -----------------
-
-  // Regular expression used to split event strings
-  var eventSplitter = /\s+/;
+  // ---------------
 
   // A module that can be mixed in to *any object* in order to provide it with
-  // custom events. You may bind with `on` or remove with `off` callback functions
-  // to an event; trigger`-ing an event fires all callbacks in succession.
+  // custom events. You may bind with `on` or remove with `off` callback
+  // functions to an event; `trigger`-ing an event fires all callbacks in
+  // succession.
   //
   //     var object = {};
   //     _.extend(object, Backbone.Events);
@@ -85,58 +77,56 @@
   //
   var Events = Backbone.Events = {
 
-    // Bind one or more space separated events, `events`, to a `callback`
-    // function. Passing `"all"` will bind the callback to all events fired.
-    on: function(events, callback, context) {
-
-      var calls, event, node, tail, list;
-      if (!callback) return this;
-      events = events.split(eventSplitter);
-      calls = this._callbacks || (this._callbacks = {});
-
-      // Create an immutable callback list, allowing traversal during
-      // modification.  The tail is an empty object that will always be used
-      // as the next node.
-      while (event = events.shift()) {
-        list = calls[event];
-        node = list ? list.tail : {};
-        node.next = tail = {};
-        node.context = context;
-        node.callback = callback;
-        calls[event] = {tail: tail, next: list ? list.next : node};
-      }
-
+    // Bind an event to a `callback` function. Passing `"all"` will bind
+    // the callback to all events fired.
+    on: function(name, callback, context) {
+      if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;
+      this._events || (this._events = {});
+      var events = this._events[name] || (this._events[name] = []);
+      events.push({callback: callback, context: context, ctx: context || this});
       return this;
     },
 
-    // Remove one or many callbacks. If `context` is null, removes all callbacks
-    // with that function. If `callback` is null, removes all callbacks for the
-    // event. If `events` is null, removes all bound callbacks for all events.
-    off: function(events, callback, context) {
-      var event, calls, node, tail, cb, ctx;
+    // Bind an event to only be triggered a single time. After the first time
+    // the callback is invoked, it will be removed.
+    once: function(name, callback, context) {
+      if (!eventsApi(this, 'once', name, [callback, context]) || !callback) return this;
+      var self = this;
+      var once = _.once(function() {
+        self.off(name, once);
+        callback.apply(this, arguments);
+      });
+      once._callback = callback;
+      return this.on(name, once, context);
+    },
 
-      // No events, or removing *all* events.
-      if (!(calls = this._callbacks)) return;
-      if (!(events || callback || context)) {
-        delete this._callbacks;
+    // Remove one or many callbacks. If `context` is null, removes all
+    // callbacks with that function. If `callback` is null, removes all
+    // callbacks for the event. If `name` is null, removes all bound
+    // callbacks for all events.
+    off: function(name, callback, context) {
+      var retain, ev, events, names, i, l, j, k;
+      if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;
+      if (!name && !callback && !context) {
+        this._events = {};
         return this;
       }
 
-      // Loop through the listed events and contexts, splicing them out of the
-      // linked list of callbacks if appropriate.
-      events = events ? events.split(eventSplitter) : _.keys(calls);
-      while (event = events.shift()) {
-        node = calls[event];
-        delete calls[event];
-        if (!node || !(callback || context)) continue;
-        // Create a new list, omitting the indicated callbacks.
-        tail = node.tail;
-        while ((node = node.next) !== tail) {
-          cb = node.callback;
-          ctx = node.context;
-          if ((callback && cb !== callback) || (context && ctx !== context)) {
-            this.on(event, cb, ctx);
+      names = name ? [name] : _.keys(this._events);
+      for (i = 0, l = names.length; i < l; i++) {
+        name = names[i];
+        if (events = this._events[name]) {
+          this._events[name] = retain = [];
+          if (callback || context) {
+            for (j = 0, k = events.length; j < k; j++) {
+              ev = events[j];
+              if ((callback && callback !== ev.callback && callback !== ev.callback._callback) ||
+                  (context && context !== ev.context)) {
+                retain.push(ev);
+              }
+            }
           }
+          if (!retain.length) delete this._events[name];
         }
       }
 
@@ -147,81 +137,138 @@
     // passed the same arguments as `trigger` is, apart from the event name
     // (unless you're listening on `"all"`, which will cause your callback to
     // receive the true name of the event as the first argument).
-    trigger: function(events) {
-      var event, node, calls, tail, args, all, rest;
-      if (!(calls = this._callbacks)) return this;
-      all = calls.all;
-      events = events.split(eventSplitter);
-      rest = slice.call(arguments, 1);
-
-      // For each event, walk through the linked list of callbacks twice,
-      // first to trigger the event, then to trigger any `"all"` callbacks.
-      while (event = events.shift()) {
-        if (node = calls[event]) {
-          tail = node.tail;
-          while ((node = node.next) !== tail) {
-            node.callback.apply(node.context || this, rest);
-          }
-        }
-        if (node = all) {
-          tail = node.tail;
-          args = [event].concat(rest);
-          while ((node = node.next) !== tail) {
-            node.callback.apply(node.context || this, args);
-          }
-        }
-      }
+    trigger: function(name) {
+      if (!this._events) return this;
+      var args = slice.call(arguments, 1);
+      if (!eventsApi(this, 'trigger', name, args)) return this;
+      var events = this._events[name];
+      var allEvents = this._events.all;
+      if (events) triggerEvents(events, args);
+      if (allEvents) triggerEvents(allEvents, arguments);
+      return this;
+    },
 
+    // Tell this object to stop listening to either specific events ... or
+    // to every object it's currently listening to.
+    stopListening: function(obj, name, callback) {
+      var listeners = this._listeners;
+      if (!listeners) return this;
+      var deleteListener = !name && !callback;
+      if (typeof name === 'object') callback = this;
+      if (obj) (listeners = {})[obj._listenerId] = obj;
+      for (var id in listeners) {
+        listeners[id].off(name, callback, this);
+        if (deleteListener) delete this._listeners[id];
+      }
       return this;
     }
 
   };
 
+  // Regular expression used to split event strings.
+  var eventSplitter = /\s+/;
+
+  // Implement fancy features of the Events API such as multiple event
+  // names `"change blur"` and jQuery-style event maps `{change: action}`
+  // in terms of the existing API.
+  var eventsApi = function(obj, action, name, rest) {
+    if (!name) return true;
+
+    // Handle event maps.
+    if (typeof name === 'object') {
+      for (var key in name) {
+        obj[action].apply(obj, [key, name[key]].concat(rest));
+      }
+      return false;
+    }
+
+    // Handle space separated event names.
+    if (eventSplitter.test(name)) {
+      var names = name.split(eventSplitter);
+      for (var i = 0, l = names.length; i < l; i++) {
+        obj[action].apply(obj, [names[i]].concat(rest));
+      }
+      return false;
+    }
+
+    return true;
+  };
+
+  // A difficult-to-believe, but optimized internal dispatch function for
+  // triggering events. Tries to keep the usual cases speedy (most internal
+  // Backbone events have 3 arguments).
+  var triggerEvents = function(events, args) {
+    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
+    switch (args.length) {
+      case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
+      case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
+      case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
+      case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
+      default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
+    }
+  };
+
+  var listenMethods = {listenTo: 'on', listenToOnce: 'once'};
+
+  // Inversion-of-control versions of `on` and `once`. Tell *this* object to
+  // listen to an event in another object ... keeping track of what it's
+  // listening to.
+  _.each(listenMethods, function(implementation, method) {
+    Events[method] = function(obj, name, callback) {
+      var listeners = this._listeners || (this._listeners = {});
+      var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));
+      listeners[id] = obj;
+      if (typeof name === 'object') callback = this;
+      obj[implementation](name, callback, this);
+      return this;
+    };
+  });
+
   // Aliases for backwards compatibility.
   Events.bind   = Events.on;
   Events.unbind = Events.off;
 
+  // Allow the `Backbone` object to serve as a global event bus, for folks who
+  // want global "pubsub" in a convenient place.
+  _.extend(Backbone, Events);
+
   // Backbone.Model
   // --------------
 
-  // Create a new model, with defined attributes. A client id (`cid`)
+  // Backbone **Models** are the basic data object in the framework --
+  // frequently representing a row in a table in a database on your server.
+  // A discrete chunk of data and a bunch of useful, related methods for
+  // performing computations and transformations on that data.
+
+  // Create a new model with the specified attributes. A client id (`cid`)
   // is automatically generated and assigned for you.
   var Model = Backbone.Model = function(attributes, options) {
     var defaults;
-    attributes || (attributes = {});
-    if (options && options.parse) attributes = this.parse(attributes);
-    if (defaults = getValue(this, 'defaults')) {
-      attributes = _.extend({}, defaults, attributes);
-    }
-    if (options && options.collection) this.collection = options.collection;
-    this.attributes = {};
-    this._escapedAttributes = {};
+    var attrs = attributes || {};
+    options || (options = {});
     this.cid = _.uniqueId('c');
+    this.attributes = {};
+    _.extend(this, _.pick(options, modelOptions));
+    if (options.parse) attrs = this.parse(attrs, options) || {};
+    if (defaults = _.result(this, 'defaults')) {
+      attrs = _.defaults({}, attrs, defaults);
+    }
+    this.set(attrs, options);
     this.changed = {};
-    this._silent = {};
-    this._pending = {};
-    this.set(attributes, {silent: true});
-    // Reset change tracking.
-    this.changed = {};
-    this._silent = {};
-    this._pending = {};
-    this._previousAttributes = _.clone(this.attributes);
     this.initialize.apply(this, arguments);
   };
 
+  // A list of options to be attached directly to the model, if provided.
+  var modelOptions = ['url', 'urlRoot', 'collection'];
+
   // Attach all inheritable methods to the Model prototype.
   _.extend(Model.prototype, Events, {
 
     // A hash of attributes whose current and previous value differ.
     changed: null,
 
-    // A hash of attributes that have silently changed since the last time
-    // `change` was called.  Will become pending attributes on the next call.
-    _silent: null,
-
-    // A hash of attributes that have changed since the last `'change'` event
-    // began.
-    _pending: null,
+    // The value returned during the last failed validation.
+    validationError: null,
 
     // The default name for the JSON `id` attribute is `"id"`. MongoDB and
     // CouchDB users may want to set this to `"_id"`.
@@ -236,6 +283,12 @@
       return _.clone(this.attributes);
     },
 
+    // Proxy `Backbone.sync` by default -- but override this if you need
+    // custom syncing semantics for *this* particular model.
+    sync: function() {
+      return Backbone.sync.apply(this, arguments);
+    },
+
     // Get the value of an attribute.
     get: function(attr) {
       return this.attributes[attr];
@@ -243,10 +296,7 @@
 
     // Get the HTML-escaped value of an attribute.
     escape: function(attr) {
-      var html;
-      if (html = this._escapedAttributes[attr]) return html;
-      var val = this.get(attr);
-      return this._escapedAttributes[attr] = _.escape(val == null ? '' : '' + val);
+      return _.escape(this.get(attr));
     },
 
     // Returns `true` if the attribute contains a value that is not null
@@ -255,146 +305,195 @@
       return this.get(attr) != null;
     },
 
-    // Set a hash of model attributes on the object, firing `"change"` unless
-    // you choose to silence it.
-    set: function(key, value, options) {
-      var attrs, attr, val;
+    // Set a hash of model attributes on the object, firing `"change"`. This is
+    // the core primitive operation of a model, updating the data and notifying
+    // anyone who needs to know about the change in state. The heart of the beast.
+    set: function(key, val, options) {
+      var attr, attrs, unset, changes, silent, changing, prev, current;
+      if (key == null) return this;
 
       // Handle both `"key", value` and `{key: value}` -style arguments.
-      if (_.isObject(key) || key == null) {
+      if (typeof key === 'object') {
         attrs = key;
-        options = value;
+        options = val;
       } else {
-        attrs = {};
-        attrs[key] = value;
+        (attrs = {})[key] = val;
       }
 
-      // Extract attributes and options.
       options || (options = {});
-      if (!attrs) return this;
-      if (attrs instanceof Model) attrs = attrs.attributes;
-      if (options.unset) for (attr in attrs) attrs[attr] = void 0;
 
       // Run validation.
       if (!this._validate(attrs, options)) return false;
 
+      // Extract attributes and options.
+      unset           = options.unset;
+      silent          = options.silent;
+      changes         = [];
+      changing        = this._changing;
+      this._changing  = true;
+
+      if (!changing) {
+        this._previousAttributes = _.clone(this.attributes);
+        this.changed = {};
+      }
+      current = this.attributes, prev = this._previousAttributes;
+
       // Check for changes of `id`.
       if (this.idAttribute in attrs) this.id = attrs[this.idAttribute];
 
-      var changes = options.changes = {};
-      var now = this.attributes;
-      var escaped = this._escapedAttributes;
-      var prev = this._previousAttributes || {};
-
-      // For each `set` attribute...
+      // For each `set` attribute, update or delete the current value.
       for (attr in attrs) {
         val = attrs[attr];
-
-        // If the new and current value differ, record the change.
-        if (!_.isEqual(now[attr], val) || (options.unset && _.has(now, attr))) {
-          delete escaped[attr];
-          (options.silent ? this._silent : changes)[attr] = true;
-        }
-
-        // Update or delete the current value.
-        options.unset ? delete now[attr] : now[attr] = val;
-
-        // If the new and previous value differ, record the change.  If not,
-        // then remove changes for this attribute.
-        if (!_.isEqual(prev[attr], val) || (_.has(now, attr) != _.has(prev, attr))) {
+        if (!_.isEqual(current[attr], val)) changes.push(attr);
+        if (!_.isEqual(prev[attr], val)) {
           this.changed[attr] = val;
-          if (!options.silent) this._pending[attr] = true;
         } else {
           delete this.changed[attr];
-          delete this._pending[attr];
+        }
+        unset ? delete current[attr] : current[attr] = val;
+      }
+
+      // Trigger all relevant attribute changes.
+      if (!silent) {
+        if (changes.length) this._pending = true;
+        for (var i = 0, l = changes.length; i < l; i++) {
+          this.trigger('change:' + changes[i], this, current[changes[i]], options);
         }
       }
 
-      // Fire the `"change"` events.
-      if (!options.silent) this.change(options);
+      // You might be wondering why there's a `while` loop here. Changes can
+      // be recursively nested within `"change"` events.
+      if (changing) return this;
+      if (!silent) {
+        while (this._pending) {
+          this._pending = false;
+          this.trigger('change', this, options);
+        }
+      }
+      this._pending = false;
+      this._changing = false;
       return this;
     },
 
-    // Remove an attribute from the model, firing `"change"` unless you choose
-    // to silence it. `unset` is a noop if the attribute doesn't exist.
+    // Remove an attribute from the model, firing `"change"`. `unset` is a noop
+    // if the attribute doesn't exist.
     unset: function(attr, options) {
-      (options || (options = {})).unset = true;
-      return this.set(attr, null, options);
+      return this.set(attr, void 0, _.extend({}, options, {unset: true}));
     },
 
-    // Clear all attributes on the model, firing `"change"` unless you choose
-    // to silence it.
+    // Clear all attributes on the model, firing `"change"`.
     clear: function(options) {
-      (options || (options = {})).unset = true;
-      return this.set(_.clone(this.attributes), options);
+      var attrs = {};
+      for (var key in this.attributes) attrs[key] = void 0;
+      return this.set(attrs, _.extend({}, options, {unset: true}));
+    },
+
+    // Determine if the model has changed since the last `"change"` event.
+    // If you specify an attribute name, determine if that attribute has changed.
+    hasChanged: function(attr) {
+      if (attr == null) return !_.isEmpty(this.changed);
+      return _.has(this.changed, attr);
+    },
+
+    // Return an object containing all the attributes that have changed, or
+    // false if there are no changed attributes. Useful for determining what
+    // parts of a view need to be updated and/or what attributes need to be
+    // persisted to the server. Unset attributes will be set to undefined.
+    // You can also pass an attributes object to diff against the model,
+    // determining if there *would be* a change.
+    changedAttributes: function(diff) {
+      if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
+      var val, changed = false;
+      var old = this._changing ? this._previousAttributes : this.attributes;
+      for (var attr in diff) {
+        if (_.isEqual(old[attr], (val = diff[attr]))) continue;
+        (changed || (changed = {}))[attr] = val;
+      }
+      return changed;
+    },
+
+    // Get the previous value of an attribute, recorded at the time the last
+    // `"change"` event was fired.
+    previous: function(attr) {
+      if (attr == null || !this._previousAttributes) return null;
+      return this._previousAttributes[attr];
+    },
+
+    // Get all of the attributes of the model at the time of the previous
+    // `"change"` event.
+    previousAttributes: function() {
+      return _.clone(this._previousAttributes);
     },
 
     // Fetch the model from the server. If the server's representation of the
-    // model differs from its current attributes, they will be overriden,
+    // model differs from its current attributes, they will be overridden,
     // triggering a `"change"` event.
     fetch: function(options) {
       options = options ? _.clone(options) : {};
+      if (options.parse === void 0) options.parse = true;
       var model = this;
       var success = options.success;
-      options.success = function(resp, status, xhr) {
-        if (!model.set(model.parse(resp, xhr), options)) return false;
-        if (success) success(model, resp);
+      options.success = function(resp) {
+        if (!model.set(model.parse(resp, options), options)) return false;
+        if (success) success(model, resp, options);
+        model.trigger('sync', model, resp, options);
       };
-      options.error = Backbone.wrapError(options.error, model, options);
-      return (this.sync || Backbone.sync).call(this, 'read', this, options);
+      wrapError(this, options);
+      return this.sync('read', this, options);
     },
 
     // Set a hash of model attributes, and sync the model to the server.
     // If the server returns an attributes hash that differs, the model's
     // state will be `set` again.
-    save: function(key, value, options) {
-      var attrs, current;
+    save: function(key, val, options) {
+      var attrs, method, xhr, attributes = this.attributes;
 
-      // Handle both `("key", value)` and `({key: value})` -style calls.
-      if (_.isObject(key) || key == null) {
+      // Handle both `"key", value` and `{key: value}` -style arguments.
+      if (key == null || typeof key === 'object') {
         attrs = key;
-        options = value;
+        options = val;
       } else {
-        attrs = {};
-        attrs[key] = value;
+        (attrs = {})[key] = val;
       }
-      options = options ? _.clone(options) : {};
 
-      // If we're "wait"-ing to set changed attributes, validate early.
-      if (options.wait) {
-        if (!this._validate(attrs, options)) return false;
-        current = _.clone(this.attributes);
-      }
+      // If we're not waiting and attributes exist, save acts as `set(attr).save(null, opts)`.
+      if (attrs && (!options || !options.wait) && !this.set(attrs, options)) return false;
 
-      // Regular saves `set` attributes before persisting to the server.
-      var silentOptions = _.extend({}, options, {silent: true});
-      if (attrs && !this.set(attrs, options.wait ? silentOptions : options)) {
-        return false;
+      options = _.extend({validate: true}, options);
+
+      // Do not persist invalid models.
+      if (!this._validate(attrs, options)) return false;
+
+      // Set temporary attributes if `{wait: true}`.
+      if (attrs && options.wait) {
+        this.attributes = _.extend({}, attributes, attrs);
       }
 
       // After a successful server-side save, the client is (optionally)
       // updated with the server-side state.
+      if (options.parse === void 0) options.parse = true;
       var model = this;
       var success = options.success;
-      options.success = function(resp, status, xhr) {
-        var serverAttrs = model.parse(resp, xhr);
-        if (options.wait) {
-          delete options.wait;
-          serverAttrs = _.extend(attrs || {}, serverAttrs);
-        }
-        if (!model.set(serverAttrs, options)) return false;
-        if (success) {
-          success(model, resp);
-        } else {
-          model.trigger('sync', model, resp, options);
+      options.success = function(resp) {
+        // Ensure attributes are restored during synchronous saves.
+        model.attributes = attributes;
+        var serverAttrs = model.parse(resp, options);
+        if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs);
+        if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) {
+          return false;
         }
+        if (success) success(model, resp, options);
+        model.trigger('sync', model, resp, options);
       };
+      wrapError(this, options);
+
+      method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');
+      if (method === 'patch') options.attrs = attrs;
+      xhr = this.sync(method, this, options);
+
+      // Restore attributes.
+      if (attrs && options.wait) this.attributes = attributes;
 
-      // Finish configuring and sending the Ajax request.
-      options.error = Backbone.wrapError(options.error, model, options);
-      var method = this.isNew() ? 'create' : 'update';
-      var xhr = (this.sync || Backbone.sync).call(this, method, this, options);
-      if (options.wait) this.set(current, silentOptions);
       return xhr;
     },
 
@@ -406,27 +505,24 @@
       var model = this;
       var success = options.success;
 
-      var triggerDestroy = function() {
+      var destroy = function() {
         model.trigger('destroy', model, model.collection, options);
       };
 
+      options.success = function(resp) {
+        if (options.wait || model.isNew()) destroy();
+        if (success) success(model, resp, options);
+        if (!model.isNew()) model.trigger('sync', model, resp, options);
+      };
+
       if (this.isNew()) {
-        triggerDestroy();
+        options.success();
         return false;
       }
+      wrapError(this, options);
 
-      options.success = function(resp) {
-        if (options.wait) triggerDestroy();
-        if (success) {
-          success(model, resp);
-        } else {
-          model.trigger('sync', model, resp, options);
-        }
-      };
-
-      options.error = Backbone.wrapError(options.error, model, options);
-      var xhr = (this.sync || Backbone.sync).call(this, 'delete', this, options);
-      if (!options.wait) triggerDestroy();
+      var xhr = this.sync('delete', this, options);
+      if (!options.wait) destroy();
       return xhr;
     },
 
@@ -434,14 +530,14 @@
     // using Backbone's restful methods, override this to change the endpoint
     // that will be called.
     url: function() {
-      var base = getValue(this, 'urlRoot') || getValue(this.collection, 'url') || urlError();
+      var base = _.result(this, 'urlRoot') || _.result(this.collection, 'url') || urlError();
       if (this.isNew()) return base;
-      return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + encodeURIComponent(this.id);
+      return base + (base.charAt(base.length - 1) === '/' ? '' : '/') + encodeURIComponent(this.id);
     },
 
     // **parse** converts a response into the hash of attributes to be `set` on
     // the model. The default implementation is just to pass the response along.
-    parse: function(resp, xhr) {
+    parse: function(resp, options) {
       return resp;
     },
 
@@ -455,116 +551,63 @@
       return this.id == null;
     },
 
-    // Call this method to manually fire a `"change"` event for this model and
-    // a `"change:attribute"` event for each changed attribute.
-    // Calling this will cause all objects observing the model to update.
-    change: function(options) {
-      options || (options = {});
-      var changing = this._changing;
-      this._changing = true;
-
-      // Silent changes become pending changes.
-      for (var attr in this._silent) this._pending[attr] = true;
-
-      // Silent changes are triggered.
-      var changes = _.extend({}, options.changes, this._silent);
-      this._silent = {};
-      for (var attr in changes) {
-        this.trigger('change:' + attr, this, this.get(attr), options);
-      }
-      if (changing) return this;
-
-      // Continue firing `"change"` events while there are pending changes.
-      while (!_.isEmpty(this._pending)) {
-        this._pending = {};
-        this.trigger('change', this, options);
-        // Pending and silent changes still remain.
-        for (var attr in this.changed) {
-          if (this._pending[attr] || this._silent[attr]) continue;
-          delete this.changed[attr];
-        }
-        this._previousAttributes = _.clone(this.attributes);
-      }
-
-      this._changing = false;
-      return this;
-    },
-
-    // Determine if the model has changed since the last `"change"` event.
-    // If you specify an attribute name, determine if that attribute has changed.
-    hasChanged: function(attr) {
-      if (!arguments.length) return !_.isEmpty(this.changed);
-      return _.has(this.changed, attr);
-    },
-
-    // Return an object containing all the attributes that have changed, or
-    // false if there are no changed attributes. Useful for determining what
-    // parts of a view need to be updated and/or what attributes need to be
-    // persisted to the server. Unset attributes will be set to undefined.
-    // You can also pass an attributes object to diff against the model,
-    // determining if there *would be* a change.
-    changedAttributes: function(diff) {
-      if (!diff) return this.hasChanged() ? _.clone(this.changed) : false;
-      var val, changed = false, old = this._previousAttributes;
-      for (var attr in diff) {
-        if (_.isEqual(old[attr], (val = diff[attr]))) continue;
-        (changed || (changed = {}))[attr] = val;
-      }
-      return changed;
-    },
-
-    // Get the previous value of an attribute, recorded at the time the last
-    // `"change"` event was fired.
-    previous: function(attr) {
-      if (!arguments.length || !this._previousAttributes) return null;
-      return this._previousAttributes[attr];
-    },
-
-    // Get all of the attributes of the model at the time of the previous
-    // `"change"` event.
-    previousAttributes: function() {
-      return _.clone(this._previousAttributes);
-    },
-
-    // Check if the model is currently in a valid state. It's only possible to
-    // get into an *invalid* state if you're using silent changes.
-    isValid: function() {
-      return !this.validate(this.attributes);
+    // Check if the model is currently in a valid state.
+    isValid: function(options) {
+      return this._validate({}, _.extend(options || {}, { validate: true }));
     },
 
     // Run validation against the next complete set of model attributes,
-    // returning `true` if all is well. If a specific `error` callback has
-    // been passed, call that instead of firing the general `"error"` event.
+    // returning `true` if all is well. Otherwise, fire an `"invalid"` event.
     _validate: function(attrs, options) {
-      if (options.silent || !this.validate) return true;
+      if (!options.validate || !this.validate) return true;
       attrs = _.extend({}, this.attributes, attrs);
-      var error = this.validate(attrs, options);
+      var error = this.validationError = this.validate(attrs, options) || null;
       if (!error) return true;
-      if (options && options.error) {
-        options.error(this, error, options);
-      } else {
-        this.trigger('error', this, error, options);
-      }
+      this.trigger('invalid', this, error, _.extend(options || {}, {validationError: error}));
       return false;
     }
 
   });
 
+  // Underscore methods that we want to implement on the Model.
+  var modelMethods = ['keys', 'values', 'pairs', 'invert', 'pick', 'omit'];
+
+  // Mix in each Underscore method as a proxy to `Model#attributes`.
+  _.each(modelMethods, function(method) {
+    Model.prototype[method] = function() {
+      var args = slice.call(arguments);
+      args.unshift(this.attributes);
+      return _[method].apply(_, args);
+    };
+  });
+
   // Backbone.Collection
   // -------------------
 
-  // Provides a standard collection class for our sets of models, ordered
-  // or unordered. If a `comparator` is specified, the Collection will maintain
+  // If models tend to represent a single row of data, a Backbone Collection is
+  // more analagous to a table full of data ... or a small slice or page of that
+  // table, or a collection of rows that belong together for a particular reason
+  // -- all of the messages in this particular folder, all of the documents
+  // belonging to this particular author, and so on. Collections maintain
+  // indexes of their models, both in order, and for lookup by `id`.
+
+  // Create a new **Collection**, perhaps to contain a specific type of `model`.
+  // If a `comparator` is specified, the Collection will maintain
   // its models in sort order, as they're added and removed.
   var Collection = Backbone.Collection = function(models, options) {
     options || (options = {});
+    if (options.url) this.url = options.url;
     if (options.model) this.model = options.model;
-    if (options.comparator) this.comparator = options.comparator;
+    if (options.comparator !== void 0) this.comparator = options.comparator;
     this._reset();
     this.initialize.apply(this, arguments);
-    if (models) this.reset(models, {silent: true, parse: options.parse});
+    if (models) this.reset(models, _.extend({silent: true}, options));
   };
 
+  // Default options for `Collection#set`.
+  var setOptions = {add: true, remove: true, merge: true};
+  var addOptions = {add: true, merge: false, remove: false};
+
   // Define the Collection's inheritable methods.
   _.extend(Collection.prototype, Events, {
 
@@ -582,68 +625,26 @@
       return this.map(function(model){ return model.toJSON(options); });
     },
 
-    // Add a model, or list of models to the set. Pass **silent** to avoid
-    // firing the `add` event for every new model.
-    add: function(models, options) {
-      var i, index, length, model, cid, id, cids = {}, ids = {}, dups = [];
-      options || (options = {});
-      models = _.isArray(models) ? models.slice() : [models];
-
-      // Begin by turning bare objects into model references, and preventing
-      // invalid models or duplicate models from being added.
-      for (i = 0, length = models.length; i < length; i++) {
-        if (!(model = models[i] = this._prepareModel(models[i], options))) {
-          throw new Error("Can't add an invalid model to a collection");
-        }
-        cid = model.cid;
-        id = model.id;
-        if (cids[cid] || this._byCid[cid] || ((id != null) && (ids[id] || this._byId[id]))) {
-          dups.push(i);
-          continue;
-        }
-        cids[cid] = ids[id] = model;
-      }
-
-      // Remove duplicates.
-      i = dups.length;
-      while (i--) {
-        models.splice(dups[i], 1);
-      }
-
-      // Listen to added models' events, and index models for lookup by
-      // `id` and by `cid`.
-      for (i = 0, length = models.length; i < length; i++) {
-        (model = models[i]).on('all', this._onModelEvent, this);
-        this._byCid[model.cid] = model;
-        if (model.id != null) this._byId[model.id] = model;
-      }
+    // Proxy `Backbone.sync` by default.
+    sync: function() {
+      return Backbone.sync.apply(this, arguments);
+    },
 
-      // Insert models into the collection, re-sorting if needed, and triggering
-      // `add` events unless silenced.
-      this.length += length;
-      index = options.at != null ? options.at : this.models.length;
-      splice.apply(this.models, [index, 0].concat(models));
-      if (this.comparator) this.sort({silent: true});
-      if (options.silent) return this;
-      for (i = 0, length = this.models.length; i < length; i++) {
-        if (!cids[(model = this.models[i]).cid]) continue;
-        options.index = i;
-        model.trigger('add', model, this, options);
-      }
-      return this;
+    // Add a model, or list of models to the set.
+    add: function(models, options) {
+      return this.set(models, _.defaults(options || {}, addOptions));
     },
 
-    // Remove a model, or a list of models from the set. Pass silent to avoid
-    // firing the `remove` event for every model removed.
+    // Remove a model, or a list of models from the set.
     remove: function(models, options) {
-      var i, l, index, model;
-      options || (options = {});
       models = _.isArray(models) ? models.slice() : [models];
+      options || (options = {});
+      var i, l, index, model;
       for (i = 0, l = models.length; i < l; i++) {
-        model = this.getByCid(models[i]) || this.get(models[i]);
+        model = this.get(models[i]);
         if (!model) continue;
         delete this._byId[model.id];
-        delete this._byCid[model.cid];
+        delete this._byId[model.cid];
         index = this.indexOf(model);
         this.models.splice(index, 1);
         this.length--;
@@ -656,10 +657,100 @@
       return this;
     },
 
+    // Update a collection by `set`-ing a new list of models, adding new ones,
+    // removing models that are no longer present, and merging models that
+    // already exist in the collection, as necessary. Similar to **Model#set**,
+    // the core operation for updating the data contained by the collection.
+    set: function(models, options) {
+      options = _.defaults(options || {}, setOptions);
+      if (options.parse) models = this.parse(models, options);
+      if (!_.isArray(models)) models = models ? [models] : [];
+      var i, l, model, attrs, existing, sort;
+      var at = options.at;
+      var sortable = this.comparator && (at == null) && options.sort !== false;
+      var sortAttr = _.isString(this.comparator) ? this.comparator : null;
+      var toAdd = [], toRemove = [], modelMap = {};
+
+      // Turn bare objects into model references, and prevent invalid models
+      // from being added.
+      for (i = 0, l = models.length; i < l; i++) {
+        if (!(model = this._prepareModel(models[i], options))) continue;
+
+        // If a duplicate is found, prevent it from being added and
+        // optionally merge it into the existing model.
+        if (existing = this.get(model)) {
+          if (options.remove) modelMap[existing.cid] = true;
+          if (options.merge) {
+            existing.set(model.attributes, options);
+            if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true;
+          }
+
+        // This is a new model, push it to the `toAdd` list.
+        } else if (options.add) {
+          toAdd.push(model);
+
+          // Listen to added models' events, and index models for lookup by
+          // `id` and by `cid`.
+          model.on('all', this._onModelEvent, this);
+          this._byId[model.cid] = model;
+          if (model.id != null) this._byId[model.id] = model;
+        }
+      }
+
+      // Remove nonexistent models if appropriate.
+      if (options.remove) {
+        for (i = 0, l = this.length; i < l; ++i) {
+          if (!modelMap[(model = this.models[i]).cid]) toRemove.push(model);
+        }
+        if (toRemove.length) this.remove(toRemove, options);
+      }
+
+      // See if sorting is needed, update `length` and splice in new models.
+      if (toAdd.length) {
+        if (sortable) sort = true;
+        this.length += toAdd.length;
+        if (at != null) {
+          splice.apply(this.models, [at, 0].concat(toAdd));
+        } else {
+          push.apply(this.models, toAdd);
+        }
+      }
+
+      // Silently sort the collection if appropriate.
+      if (sort) this.sort({silent: true});
+
+      if (options.silent) return this;
+
+      // Trigger `add` events.
+      for (i = 0, l = toAdd.length; i < l; i++) {
+        (model = toAdd[i]).trigger('add', model, this, options);
+      }
+
+      // Trigger `sort` if the collection was sorted.
+      if (sort) this.trigger('sort', this, options);
+      return this;
+    },
+
+    // When you have more items than you want to add or remove individually,
+    // you can reset the entire set with a new list of models, without firing
+    // any granular `add` or `remove` events. Fires `reset` when finished.
+    // Useful for bulk operations and optimizations.
+    reset: function(models, options) {
+      options || (options = {});
+      for (var i = 0, l = this.models.length; i < l; i++) {
+        this._removeReference(this.models[i]);
+      }
+      options.previousModels = this.models;
+      this._reset();
+      this.add(models, _.extend({silent: true}, options));
+      if (!options.silent) this.trigger('reset', this, options);
+      return this;
+    },
+
     // Add a model to the end of the collection.
     push: function(model, options) {
       model = this._prepareModel(model, options);
-      this.add(model, options);
+      this.add(model, _.extend({at: this.length}, options));
       return model;
     },
 
@@ -684,15 +775,15 @@
       return model;
     },
 
-    // Get a model from the set by id.
-    get: function(id) {
-      if (id == null) return void 0;
-      return this._byId[id.id != null ? id.id : id];
+    // Slice out a sub-array of models from the collection.
+    slice: function(begin, end) {
+      return this.models.slice(begin, end);
     },
 
-    // Get a model from the set by client id.
-    getByCid: function(cid) {
-      return cid && this._byCid[cid.cid || cid];
+    // Get a model from the set by id.
+    get: function(obj) {
+      if (obj == null) return void 0;
+      return this._byId[obj.id != null ? obj.id : obj.cid || obj];
     },
 
     // Get the model at the given index.
@@ -700,10 +791,11 @@
       return this.models[index];
     },
 
-    // Return models with matching attributes. Useful for simple cases of `filter`.
-    where: function(attrs) {
-      if (_.isEmpty(attrs)) return [];
-      return this.filter(function(model) {
+    // Return models with matching attributes. Useful for simple cases of
+    // `filter`.
+    where: function(attrs, first) {
+      if (_.isEmpty(attrs)) return first ? void 0 : [];
+      return this[first ? 'find' : 'filter'](function(model) {
         for (var key in attrs) {
           if (attrs[key] !== model.get(key)) return false;
         }
@@ -711,75 +803,75 @@
       });
     },
 
+    // Return the first model with matching attributes. Useful for simple cases
+    // of `find`.
+    findWhere: function(attrs) {
+      return this.where(attrs, true);
+    },
+
     // Force the collection to re-sort itself. You don't need to call this under
     // normal circumstances, as the set will maintain sort order as each item
     // is added.
     sort: function(options) {
-      options || (options = {});
       if (!this.comparator) throw new Error('Cannot sort a set without a comparator');
-      var boundComparator = _.bind(this.comparator, this);
-      if (this.comparator.length == 1) {
-        this.models = this.sortBy(boundComparator);
+      options || (options = {});
+
+      // Run sort based on type of `comparator`.
+      if (_.isString(this.comparator) || this.comparator.length === 1) {
+        this.models = this.sortBy(this.comparator, this);
       } else {
-        this.models.sort(boundComparator);
+        this.models.sort(_.bind(this.comparator, this));
       }
-      if (!options.silent) this.trigger('reset', this, options);
+
+      if (!options.silent) this.trigger('sort', this, options);
       return this;
     },
 
+    // Figure out the smallest index at which a model should be inserted so as
+    // to maintain order.
+    sortedIndex: function(model, value, context) {
+      value || (value = this.comparator);
+      var iterator = _.isFunction(value) ? value : function(model) {
+        return model.get(value);
+      };
+      return _.sortedIndex(this.models, model, iterator, context);
+    },
+
     // Pluck an attribute from each model in the collection.
     pluck: function(attr) {
-      return _.map(this.models, function(model){ return model.get(attr); });
-    },
-
-    // When you have more items than you want to add or remove individually,
-    // you can reset the entire set with a new list of models, without firing
-    // any `add` or `remove` events. Fires `reset` when finished.
-    reset: function(models, options) {
-      models  || (models = []);
-      options || (options = {});
-      for (var i = 0, l = this.models.length; i < l; i++) {
-        this._removeReference(this.models[i]);
-      }
-      this._reset();
-      this.add(models, _.extend({silent: true}, options));
-      if (!options.silent) this.trigger('reset', this, options);
-      return this;
+      return _.invoke(this.models, 'get', attr);
     },
 
     // Fetch the default set of models for this collection, resetting the
-    // collection when they arrive. If `add: true` is passed, appends the
-    // models to the collection instead of resetting.
+    // collection when they arrive. If `reset: true` is passed, the response
+    // data will be passed through the `reset` method instead of `set`.
     fetch: function(options) {
       options = options ? _.clone(options) : {};
-      if (options.parse === undefined) options.parse = true;
-      var collection = this;
+      if (options.parse === void 0) options.parse = true;
       var success = options.success;
-      options.success = function(resp, status, xhr) {
-        collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
-        if (success) success(collection, resp);
+      var collection = this;
+      options.success = function(resp) {
+        var method = options.reset ? 'reset' : 'set';
+        collection[method](resp, options);
+        if (success) success(collection, resp, options);
+        collection.trigger('sync', collection, resp, options);
       };
-      options.error = Backbone.wrapError(options.error, collection, options);
-      return (this.sync || Backbone.sync).call(this, 'read', this, options);
+      wrapError(this, options);
+      return this.sync('read', this, options);
     },
 
     // Create a new instance of a model in this collection. Add the model to the
     // collection immediately, unless `wait: true` is passed, in which case we
     // wait for the server to agree.
     create: function(model, options) {
-      var coll = this;
       options = options ? _.clone(options) : {};
-      model = this._prepareModel(model, options);
-      if (!model) return false;
-      if (!options.wait) coll.add(model, options);
+      if (!(model = this._prepareModel(model, options))) return false;
+      if (!options.wait) this.add(model, options);
+      var collection = this;
       var success = options.success;
-      options.success = function(nextModel, resp, xhr) {
-        if (options.wait) coll.add(nextModel, options);
-        if (success) {
-          success(nextModel, resp);
-        } else {
-          nextModel.trigger('sync', model, resp, options);
-        }
+      options.success = function(resp) {
+        if (options.wait) collection.add(model, options);
+        if (success) success(model, resp, options);
       };
       model.save(null, options);
       return model;
@@ -787,44 +879,43 @@
 
     // **parse** converts a response into a list of models to be added to the
     // collection. The default implementation is just to pass it through.
-    parse: function(resp, xhr) {
+    parse: function(resp, options) {
       return resp;
     },
 
-    // Proxy to _'s chain. Can't be proxied the same way the rest of the
-    // underscore methods are proxied because it relies on the underscore
-    // constructor.
-    chain: function () {
-      return _(this.models).chain();
+    // Create a new collection with an identical list of models as this one.
+    clone: function() {
+      return new this.constructor(this.models);
     },
 
-    // Reset all internal state. Called when the collection is reset.
-    _reset: function(options) {
+    // Private method to reset all internal state. Called when the collection
+    // is first initialized or reset.
+    _reset: function() {
       this.length = 0;
       this.models = [];
       this._byId  = {};
-      this._byCid = {};
     },
 
-    // Prepare a model or hash of attributes to be added to this collection.
-    _prepareModel: function(model, options) {
+    // Prepare a hash of attributes (or other model) to be added to this
+    // collection.
+    _prepareModel: function(attrs, options) {
+      if (attrs instanceof Model) {
+        if (!attrs.collection) attrs.collection = this;
+        return attrs;
+      }
       options || (options = {});
-      if (!(model instanceof Model)) {
-        var attrs = model;
-        options.collection = this;
-        model = new this.model(attrs, options);
-        if (!model._validate(model.attributes, options)) model = false;
-      } else if (!model.collection) {
-        model.collection = this;
+      options.collection = this;
+      var model = new this.model(attrs, options);
+      if (!model._validate(attrs, options)) {
+        this.trigger('invalid', this, attrs, options);
+        return false;
       }
       return model;
     },
 
-    // Internal method to remove a model's ties to a collection.
+    // Internal method to sever a model's ties to a collection.
     _removeReference: function(model) {
-      if (this == model.collection) {
-        delete model.collection;
-      }
+      if (this === model.collection) delete model.collection;
       model.off('all', this._onModelEvent, this);
     },
 
@@ -833,13 +924,11 @@
     // events simply proxy through. "add" and "remove" events that originate
     // in other collections are ignored.
     _onModelEvent: function(event, model, collection, options) {
-      if ((event == 'add' || event == 'remove') && collection != this) return;
-      if (event == 'destroy') {
-        this.remove(model, options);
-      }
+      if ((event === 'add' || event === 'remove') && collection !== this) return;
+      if (event === 'destroy') this.remove(model, options);
       if (model && event === 'change:' + model.idAttribute) {
         delete this._byId[model.previous(model.idAttribute)];
-        this._byId[model.id] = model;
+        if (model.id != null) this._byId[model.id] = model;
       }
       this.trigger.apply(this, arguments);
     }
@@ -847,21 +936,274 @@
   });
 
   // Underscore methods that we want to implement on the Collection.
-  var methods = ['forEach', 'each', 'map', 'reduce', 'reduceRight', 'find',
-                 'detect', 'filter', 'select', 'reject', 'every', 'all', 'some', 'any',
-                 'include', 'contains', 'invoke', 'max', 'min', 'sortBy', 'sortedIndex',
-                 'toArray', 'size', 'first', 'initial', 'rest', 'last', 'without', 'indexOf',
-                 'shuffle', 'lastIndexOf', 'isEmpty', 'groupBy'];
+  // 90% of the core usefulness of Backbone Collections is actually implemented
+  // right here:
+  var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl',
+    'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select',
+    'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke',
+    'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest',
+    'tail', 'drop', 'last', 'without', 'indexOf', 'shuffle', 'lastIndexOf',
+    'isEmpty', 'chain'];
 
   // Mix in each Underscore method as a proxy to `Collection#models`.
   _.each(methods, function(method) {
     Collection.prototype[method] = function() {
-      return _[method].apply(_, [this.models].concat(_.toArray(arguments)));
+      var args = slice.call(arguments);
+      args.unshift(this.models);
+      return _[method].apply(_, args);
+    };
+  });
+
+  // Underscore methods that take a property name as an argument.
+  var attributeMethods = ['groupBy', 'countBy', 'sortBy'];
+
+  // Use attributes instead of properties.
+  _.each(attributeMethods, function(method) {
+    Collection.prototype[method] = function(value, context) {
+      var iterator = _.isFunction(value) ? value : function(model) {
+        return model.get(value);
+      };
+      return _[method](this.models, iterator, context);
     };
   });
 
+  // Backbone.View
+  // -------------
+
+  // Backbone Views are almost more convention than they are actual code. A View
+  // is simply a JavaScript object that represents a logical chunk of UI in the
+  // DOM. This might be a single item, an entire list, a sidebar or panel, or
+  // even the surrounding frame which wraps your whole app. Defining a chunk of
+  // UI as a **View** allows you to define your DOM events declaratively, without
+  // having to worry about render order ... and makes it easy for the view to
+  // react to specific changes in the state of your models.
+
+  // Creating a Backbone.View creates its initial element outside of the DOM,
+  // if an existing element is not provided...
+  var View = Backbone.View = function(options) {
+    this.cid = _.uniqueId('view');
+    this._configure(options || {});
+    this._ensureElement();
+    this.initialize.apply(this, arguments);
+    this.delegateEvents();
+  };
+
+  // Cached regex to split keys for `delegate`.
+  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+  // List of view options to be merged as properties.
+  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+
+  // Set up all inheritable **Backbone.View** properties and methods.
+  _.extend(View.prototype, Events, {
+
+    // The default `tagName` of a View's element is `"div"`.
+    tagName: 'div',
+
+    // jQuery delegate for element lookup, scoped to DOM elements within the
+    // current view. This should be prefered to global lookups where possible.
+    $: function(selector) {
+      return this.$el.find(selector);
+    },
+
+    // Initialize is an empty function by default. Override it with your own
+    // initialization logic.
+    initialize: function(){},
+
+    // **render** is the core function that your view should override, in order
+    // to populate its element (`this.el`), with the appropriate HTML. The
+    // convention is for **render** to always return `this`.
+    render: function() {
+      return this;
+    },
+
+    // Remove this view by taking the element out of the DOM, and removing any
+    // applicable Backbone.Events listeners.
+    remove: function() {
+      this.$el.remove();
+      this.stopListening();
+      return this;
+    },
+
+    // Change the view's element (`this.el` property), including event
+    // re-delegation.
+    setElement: function(element, delegate) {
+      if (this.$el) this.undelegateEvents();
+      this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
+      this.el = this.$el[0];
+      if (delegate !== false) this.delegateEvents();
+      return this;
+    },
+
+    // Set callbacks, where `this.events` is a hash of
+    //
+    // *{"event selector": "callback"}*
+    //
+    //     {
+    //       'mousedown .title':  'edit',
+    //       'click .button':     'save'
+    //       'click .open':       function(e) { ... }
+    //     }
+    //
+    // pairs. Callbacks will be bound to the view, with `this` set properly.
+    // Uses event delegation for efficiency.
+    // Omitting the selector binds the event to `this.el`.
+    // This only works for delegate-able events: not `focus`, `blur`, and
+    // not `change`, `submit`, and `reset` in Internet Explorer.
+    delegateEvents: function(events) {
+      if (!(events || (events = _.result(this, 'events')))) return this;
+      this.undelegateEvents();
+      for (var key in events) {
+        var method = events[key];
+        if (!_.isFunction(method)) method = this[events[key]];
+        if (!method) continue;
+
+        var match = key.match(delegateEventSplitter);
+        var eventName = match[1], selector = match[2];
+        method = _.bind(method, this);
+        eventName += '.delegateEvents' + this.cid;
+        if (selector === '') {
+          this.$el.on(eventName, method);
+        } else {
+          this.$el.on(eventName, selector, method);
+        }
+      }
+      return this;
+    },
+
+    // Clears all callbacks previously bound to the view with `delegateEvents`.
+    // You usually don't need to use this, but may wish to if you have multiple
+    // Backbone views attached to the same DOM element.
+    undelegateEvents: function() {
+      this.$el.off('.delegateEvents' + this.cid);
+      return this;
+    },
+
+    // Performs the initial configuration of a View with a set of options.
+    // Keys with special meaning *(e.g. model, collection, id, className)* are
+    // attached directly to the view.  See `viewOptions` for an exhaustive
+    // list.
+    _configure: function(options) {
+      if (this.options) options = _.extend({}, _.result(this, 'options'), options);
+      _.extend(this, _.pick(options, viewOptions));
+      this.options = options;
+    },
+
+    // Ensure that the View has a DOM element to render into.
+    // If `this.el` is a string, pass it through `$()`, take the first
+    // matching element, and re-assign it to `el`. Otherwise, create
+    // an element from the `id`, `className` and `tagName` properties.
+    _ensureElement: function() {
+      if (!this.el) {
+        var attrs = _.extend({}, _.result(this, 'attributes'));
+        if (this.id) attrs.id = _.result(this, 'id');
+        if (this.className) attrs['class'] = _.result(this, 'className');
+        var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);
+        this.setElement($el, false);
+      } else {
+        this.setElement(_.result(this, 'el'), false);
+      }
+    }
+
+  });
+
+  // Backbone.sync
+  // -------------
+
+  // Override this function to change the manner in which Backbone persists
+  // models to the server. You will be passed the type of request, and the
+  // model in question. By default, makes a RESTful Ajax request
+  // to the model's `url()`. Some possible customizations could be:
+  //
+  // * Use `setTimeout` to batch rapid-fire updates into a single request.
+  // * Send up the models as XML instead of JSON.
+  // * Persist models via WebSockets instead of Ajax.
+  //
+  // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
+  // as `POST`, with a `_method` parameter containing the true HTTP method,
+  // as well as all requests with the body as `application/x-www-form-urlencoded`
+  // instead of `application/json` with the model in a param named `model`.
+  // Useful when interfacing with server-side languages like **PHP** that make
+  // it difficult to read the body of `PUT` requests.
+  Backbone.sync = function(method, model, options) {
+    var type = methodMap[method];
+
+    // Default options, unless specified.
+    _.defaults(options || (options = {}), {
+      emulateHTTP: Backbone.emulateHTTP,
+      emulateJSON: Backbone.emulateJSON
+    });
+
+    // Default JSON-request options.
+    var params = {type: type, dataType: 'json'};
+
+    // Ensure that we have a URL.
+    if (!options.url) {
+      params.url = _.result(model, 'url') || urlError();
+    }
+
+    // Ensure that we have the appropriate request data.
+    if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
+      params.contentType = 'application/json';
+      params.data = JSON.stringify(options.attrs || model.toJSON(options));
+    }
+
+    // For older servers, emulate JSON by encoding the request into an HTML-form.
+    if (options.emulateJSON) {
+      params.contentType = 'application/x-www-form-urlencoded';
+      params.data = params.data ? {model: params.data} : {};
+    }
+
+    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
+    // And an `X-HTTP-Method-Override` header.
+    if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
+      params.type = 'POST';
+      if (options.emulateJSON) params.data._method = type;
+      var beforeSend = options.beforeSend;
+      options.beforeSend = function(xhr) {
+        xhr.setRequestHeader('X-HTTP-Method-Override', type);
+        if (beforeSend) return beforeSend.apply(this, arguments);
+      };
+    }
+
+    // Don't process data on a non-GET request.
+    if (params.type !== 'GET' && !options.emulateJSON) {
+      params.processData = false;
+    }
+
+    // If we're sending a `PATCH` request, and we're in an old Internet Explorer
+    // that still has ActiveX enabled by default, override jQuery to use that
+    // for XHR instead. Remove this line when jQuery supports `PATCH` on IE8.
+    if (params.type === 'PATCH' && window.ActiveXObject &&
+          !(window.external && window.external.msActiveXFilteringEnabled)) {
+      params.xhr = function() {
+        return new ActiveXObject("Microsoft.XMLHTTP");
+      };
+    }
+
+    // Make the request, allowing the user to override any Ajax options.
+    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
+    model.trigger('request', model, xhr, options);
+    return xhr;
+  };
+
+  // Map from CRUD to HTTP for our default `Backbone.sync` implementation.
+  var methodMap = {
+    'create': 'POST',
+    'update': 'PUT',
+    'patch':  'PATCH',
+    'delete': 'DELETE',
+    'read':   'GET'
+  };
+
+  // Set the default implementation of `Backbone.ajax` to proxy through to `$`.
+  // Override this if you'd like to use a different library.
+  Backbone.ajax = function() {
+    return Backbone.$.ajax.apply(Backbone.$, arguments);
+  };
+
   // Backbone.Router
-  // -------------------
+  // ---------------
 
   // Routers map faux-URLs to actions, and fire events when routes are
   // matched. Creating a new one sets its `routes` hash, if not set statically.
@@ -874,9 +1216,10 @@
 
   // Cached regular expressions for matching named param parts and splatted
   // parts of route strings.
-  var namedParam    = /:\w+/g;
+  var optionalParam = /\((.*?)\)/g;
+  var namedParam    = /(\(\?)?:\w+/g;
   var splatParam    = /\*\w+/g;
-  var escapeRegExp  = /[-[\]{}()+?.,\\^$|#\s]/g;
+  var escapeRegExp  = /[\-{}\[\]+?.,\\\^$|#\s]/g;
 
   // Set up all inheritable **Backbone.Router** properties and methods.
   _.extend(Router.prototype, Events, {
@@ -892,21 +1235,27 @@
     //     });
     //
     route: function(route, name, callback) {
-      Backbone.history || (Backbone.history = new History);
       if (!_.isRegExp(route)) route = this._routeToRegExp(route);
+      if (_.isFunction(name)) {
+        callback = name;
+        name = '';
+      }
       if (!callback) callback = this[name];
-      Backbone.history.route(route, _.bind(function(fragment) {
-        var args = this._extractParameters(route, fragment);
-        callback && callback.apply(this, args);
-        this.trigger.apply(this, ['route:' + name].concat(args));
-        Backbone.history.trigger('route', this, name, args);
-      }, this));
+      var router = this;
+      Backbone.history.route(route, function(fragment) {
+        var args = router._extractParameters(route, fragment);
+        callback && callback.apply(router, args);
+        router.trigger.apply(router, ['route:' + name].concat(args));
+        router.trigger('route', name, args);
+        Backbone.history.trigger('route', router, name, args);
+      });
       return this;
     },
 
     // Simple proxy to `Backbone.history` to save a fragment into the history.
     navigate: function(fragment, options) {
       Backbone.history.navigate(fragment, options);
+      return this;
     },
 
     // Bind all defined routes to `Backbone.history`. We have to reverse the
@@ -914,12 +1263,10 @@
     // routes can be defined at the bottom of the route map.
     _bindRoutes: function() {
       if (!this.routes) return;
-      var routes = [];
-      for (var route in this.routes) {
-        routes.unshift([route, this.routes[route]]);
-      }
-      for (var i = 0, l = routes.length; i < l; i++) {
-        this.route(routes[i][0], routes[i][1], this[routes[i][1]]);
+      this.routes = _.result(this, 'routes');
+      var route, routes = _.keys(this.routes);
+      while ((route = routes.pop()) != null) {
+        this.route(route, this.routes[route]);
       }
     },
 
@@ -927,15 +1274,22 @@
     // against the current location hash.
     _routeToRegExp: function(route) {
       route = route.replace(escapeRegExp, '\\$&')
-        .replace(namedParam, '([^\/]+)')
-        .replace(splatParam, '(.*?)');
+                   .replace(optionalParam, '(?:$1)?')
+                   .replace(namedParam, function(match, optional){
+                     return optional ? match : '([^\/]+)';
+                   })
+                   .replace(splatParam, '(.*?)');
       return new RegExp('^' + route + '$');
     },
 
     // Given a route, and a URL fragment that it matches, return the array of
-    // extracted parameters.
+    // extracted decoded parameters. Empty or unmatched parameters will be
+    // treated as `null` to normalize cross-browser behavior.
     _extractParameters: function(route, fragment) {
-      return route.exec(fragment).slice(1);
+      var params = route.exec(fragment).slice(1);
+      return _.map(params, function(param) {
+        return param ? decodeURIComponent(param) : null;
+      });
     }
 
   });
@@ -943,19 +1297,34 @@
   // Backbone.History
   // ----------------
 
-  // Handles cross-browser history management, based on URL fragments. If the
-  // browser does not support `onhashchange`, falls back to polling.
+  // Handles cross-browser history management, based on either
+  // [pushState](http://diveintohtml5.info/history.html) and real URLs, or
+  // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange)
+  // and URL fragments. If the browser supports neither (old IE, natch),
+  // falls back to polling.
   var History = Backbone.History = function() {
     this.handlers = [];
     _.bindAll(this, 'checkUrl');
+
+    // Ensure that `History` can be used outside of the browser.
+    if (typeof window !== 'undefined') {
+      this.location = window.location;
+      this.history = window.history;
+    }
   };
 
-  // Cached regex for cleaning leading hashes and slashes .
-  var routeStripper = /^[#\/]/;
+  // Cached regex for stripping a leading hash/slash and trailing space.
+  var routeStripper = /^[#\/]|\s+$/g;
+
+  // Cached regex for stripping leading and trailing slashes.
+  var rootStripper = /^\/+|\/+$/g;
 
   // Cached regex for detecting MSIE.
   var isExplorer = /msie [\w.]+/;
 
+  // Cached regex for removing a trailing slash.
+  var trailingSlash = /\/$/;
+
   // Has the history handling already been started?
   History.started = false;
 
@@ -968,9 +1337,8 @@
 
     // Gets the true hash value. Cannot use location.hash directly due to bug
     // in Firefox where location.hash will always be decoded.
-    getHash: function(windowOverride) {
-      var loc = windowOverride ? windowOverride.location : window.location;
-      var match = loc.href.match(/#(.*)$/);
+    getHash: function(window) {
+      var match = (window || this).location.href.match(/#(.*)$/);
       return match ? match[1] : '';
     },
 
@@ -978,15 +1346,14 @@
     // the hash, or the override.
     getFragment: function(fragment, forcePushState) {
       if (fragment == null) {
-        if (this._hasPushState || forcePushState) {
-          fragment = window.location.pathname;
-          var search = window.location.search;
-          if (search) fragment += search;
+        if (this._hasPushState || !this._wantsHashChange || forcePushState) {
+          fragment = this.location.pathname;
+          var root = this.root.replace(trailingSlash, '');
+          if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
         } else {
           fragment = this.getHash();
         }
       }
-      if (!fragment.indexOf(this.options.root)) fragment = fragment.substr(this.options.root.length);
       return fragment.replace(routeStripper, '');
     },
 
@@ -999,24 +1366,28 @@
       // Figure out the initial configuration. Do we need an iframe?
       // Is pushState desired ... is it available?
       this.options          = _.extend({}, {root: '/'}, this.options, options);
+      this.root             = this.options.root;
       this._wantsHashChange = this.options.hashChange !== false;
       this._wantsPushState  = !!this.options.pushState;
-      this._hasPushState    = !!(this.options.pushState && window.history && window.history.pushState);
+      this._hasPushState    = !!(this.options.pushState && this.history && this.history.pushState);
       var fragment          = this.getFragment();
       var docMode           = document.documentMode;
       var oldIE             = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));
 
-      if (oldIE) {
-        this.iframe = $('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
+      // Normalize root to always include a leading and trailing slash.
+      this.root = ('/' + this.root + '/').replace(rootStripper, '/');
+
+      if (oldIE && this._wantsHashChange) {
+        this.iframe = Backbone.$('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
         this.navigate(fragment);
       }
 
       // Depending on whether we're using pushState or hashes, and whether
       // 'onhashchange' is supported, determine how we check the URL state.
       if (this._hasPushState) {
-        $(window).bind('popstate', this.checkUrl);
+        Backbone.$(window).on('popstate', this.checkUrl);
       } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
-        $(window).bind('hashchange', this.checkUrl);
+        Backbone.$(window).on('hashchange', this.checkUrl);
       } else if (this._wantsHashChange) {
         this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
       }
@@ -1024,33 +1395,31 @@
       // Determine if we need to change the base url, for a pushState link
       // opened by a non-pushState browser.
       this.fragment = fragment;
-      var loc = window.location;
-      var atRoot  = loc.pathname == this.options.root;
+      var loc = this.location;
+      var atRoot = loc.pathname.replace(/[^\/]$/, '$&/') === this.root;
 
       // If we've started off with a route from a `pushState`-enabled browser,
       // but we're currently in a browser that doesn't support it...
       if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
         this.fragment = this.getFragment(null, true);
-        window.location.replace(this.options.root + '#' + this.fragment);
+        this.location.replace(this.root + this.location.search + '#' + this.fragment);
         // Return immediately as browser will do redirect to new url
         return true;
 
-        // Or if we've started out with a hash-based route, but we're currently
-        // in a browser where it could be `pushState`-based instead...
+      // Or if we've started out with a hash-based route, but we're currently
+      // in a browser where it could be `pushState`-based instead...
       } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
         this.fragment = this.getHash().replace(routeStripper, '');
-        window.history.replaceState({}, document.title, loc.protocol + '//' + loc.host + this.options.root + this.fragment);
+        this.history.replaceState({}, document.title, this.root + this.fragment + loc.search);
       }
 
-      if (!this.options.silent) {
-        return this.loadUrl();
-      }
+      if (!this.options.silent) return this.loadUrl();
     },
 
     // Disable Backbone.history, perhaps temporarily. Not useful in a real app,
     // but possibly useful for unit testing Routers.
     stop: function() {
-      $(window).unbind('popstate', this.checkUrl).unbind('hashchange', this.checkUrl);
+      Backbone.$(window).off('popstate', this.checkUrl).off('hashchange', this.checkUrl);
       clearInterval(this._checkUrlInterval);
       History.started = false;
     },
@@ -1065,8 +1434,10 @@
     // calls `loadUrl`, normalizing across the hidden iframe.
     checkUrl: function(e) {
       var current = this.getFragment();
-      if (current == this.fragment && this.iframe) current = this.getFragment(this.getHash(this.iframe));
-      if (current == this.fragment) return false;
+      if (current === this.fragment && this.iframe) {
+        current = this.getFragment(this.getHash(this.iframe));
+      }
+      if (current === this.fragment) return false;
       if (this.iframe) this.navigate(current);
       this.loadUrl() || this.loadUrl(this.getHash());
     },
@@ -1095,31 +1466,31 @@
     navigate: function(fragment, options) {
       if (!History.started) return false;
       if (!options || options === true) options = {trigger: options};
-      var frag = (fragment || '').replace(routeStripper, '');
-      if (this.fragment == frag) return;
+      fragment = this.getFragment(fragment || '');
+      if (this.fragment === fragment) return;
+      this.fragment = fragment;
+      var url = this.root + fragment;
 
       // If pushState is available, we use it to set the fragment as a real URL.
       if (this._hasPushState) {
-        if (frag.indexOf(this.options.root) != 0) frag = this.options.root + frag;
-        this.fragment = frag;
-        window.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, frag);
+        this.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, url);
 
-        // If hash changes haven't been explicitly disabled, update the hash
-        // fragment to store history.
+      // If hash changes haven't been explicitly disabled, update the hash
+      // fragment to store history.
       } else if (this._wantsHashChange) {
-        this.fragment = frag;
-        this._updateHash(window.location, frag, options.replace);
-        if (this.iframe && (frag != this.getFragment(this.getHash(this.iframe)))) {
-          // Opening and closing the iframe tricks IE7 and earlier to push a history entry on hash-tag change.
-          // When replace is true, we don't want this.
+        this._updateHash(this.location, fragment, options.replace);
+        if (this.iframe && (fragment !== this.getFragment(this.getHash(this.iframe)))) {
+          // Opening and closing the iframe tricks IE7 and earlier to push a
+          // history entry on hash-tag change.  When replace is true, we don't
+          // want this.
           if(!options.replace) this.iframe.document.open().close();
-          this._updateHash(this.iframe.location, frag, options.replace);
+          this._updateHash(this.iframe.location, fragment, options.replace);
         }
 
-        // If you've told us that you explicitly don't want fallback hashchange-
-        // based history, then `navigate` becomes a page refresh.
+      // If you've told us that you explicitly don't want fallback hashchange-
+      // based history, then `navigate` becomes a page refresh.
       } else {
-        window.location.assign(this.options.root + fragment);
+        return this.location.assign(url);
       }
       if (options.trigger) this.loadUrl(fragment);
     },
@@ -1128,304 +1499,73 @@
     // a new one to the browser history.
     _updateHash: function(location, fragment, replace) {
       if (replace) {
-        location.replace(location.toString().replace(/(javascript:|#).*$/, '') + '#' + fragment);
-      } else {
-        location.hash = fragment;
-      }
-    }
-  });
-
-  // Backbone.View
-  // -------------
-
-  // Creating a Backbone.View creates its initial element outside of the DOM,
-  // if an existing element is not provided...
-  var View = Backbone.View = function(options) {
-    this.cid = _.uniqueId('view');
-    this._configure(options || {});
-    this._ensureElement();
-    this.initialize.apply(this, arguments);
-    this.delegateEvents();
-  };
-
-  // Cached regex to split keys for `delegate`.
-  var delegateEventSplitter = /^(\S+)\s*(.*)$/;
-
-  // List of view options to be merged as properties.
-  var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName'];
-
-  // Set up all inheritable **Backbone.View** properties and methods.
-  _.extend(View.prototype, Events, {
-
-    // The default `tagName` of a View's element is `"div"`.
-    tagName: 'div',
-
-    // jQuery delegate for element lookup, scoped to DOM elements within the
-    // current view. This should be prefered to global lookups where possible.
-    $: function(selector) {
-      return this.$el.find(selector);
-    },
-
-    // Initialize is an empty function by default. Override it with your own
-    // initialization logic.
-    initialize: function(){},
-
-    // **render** is the core function that your view should override, in order
-    // to populate its element (`this.el`), with the appropriate HTML. The
-    // convention is for **render** to always return `this`.
-    render: function() {
-      return this;
-    },
-
-    // Remove this view from the DOM. Note that the view isn't present in the
-    // DOM by default, so calling this method may be a no-op.
-    remove: function() {
-      this.$el.remove();
-      return this;
-    },
-
-    // For small amounts of DOM Elements, where a full-blown template isn't
-    // needed, use **make** to manufacture elements, one at a time.
-    //
-    //     var el = this.make('li', {'class': 'row'}, this.model.escape('title'));
-    //
-    make: function(tagName, attributes, content) {
-      var el = document.createElement(tagName);
-      if (attributes) $(el).attr(attributes);
-      if (content) $(el).html(content);
-      return el;
-    },
-
-    // Change the view's element (`this.el` property), including event
-    // re-delegation.
-    setElement: function(element, delegate) {
-      if (this.$el) this.undelegateEvents();
-      this.$el = (element instanceof $) ? element : $(element);
-      this.el = this.$el[0];
-      if (delegate !== false) this.delegateEvents();
-      return this;
-    },
-
-    // Set callbacks, where `this.events` is a hash of
-    //
-    // *{"event selector": "callback"}*
-    //
-    //     {
-    //       'mousedown .title':  'edit',
-    //       'click .button':     'save'
-    //       'click .open':       function(e) { ... }
-    //     }
-    //
-    // pairs. Callbacks will be bound to the view, with `this` set properly.
-    // Uses event delegation for efficiency.
-    // Omitting the selector binds the event to `this.el`.
-    // This only works for delegate-able events: not `focus`, `blur`, and
-    // not `change`, `submit`, and `reset` in Internet Explorer.
-    delegateEvents: function(events) {
-      if (!(events || (events = getValue(this, 'events')))) return;
-      this.undelegateEvents();
-      for (var key in events) {
-        var method = events[key];
-        if (!_.isFunction(method)) method = this[events[key]];
-        if (!method) throw new Error('Method "' + events[key] + '" does not exist');
-        var match = key.match(delegateEventSplitter);
-        var eventName = match[1], selector = match[2];
-        method = _.bind(method, this);
-        eventName += '.delegateEvents' + this.cid;
-        if (selector === '') {
-          this.$el.bind(eventName, method);
-        } else {
-          this.$el.delegate(selector, eventName, method);
-        }
-      }
-    },
-
-    // Clears all callbacks previously bound to the view with `delegateEvents`.
-    // You usually don't need to use this, but may wish to if you have multiple
-    // Backbone views attached to the same DOM element.
-    undelegateEvents: function() {
-      this.$el.unbind('.delegateEvents' + this.cid);
-    },
-
-    // Performs the initial configuration of a View with a set of options.
-    // Keys with special meaning *(model, collection, id, className)*, are
-    // attached directly to the view.
-    _configure: function(options) {
-      if (this.options) options = _.extend({}, this.options, options);
-      for (var i = 0, l = viewOptions.length; i < l; i++) {
-        var attr = viewOptions[i];
-        if (options[attr]) this[attr] = options[attr];
-      }
-      this.options = options;
-    },
-
-    // Ensure that the View has a DOM element to render into.
-    // If `this.el` is a string, pass it through `$()`, take the first
-    // matching element, and re-assign it to `el`. Otherwise, create
-    // an element from the `id`, `className` and `tagName` properties.
-    _ensureElement: function() {
-      if (!this.el) {
-        var attrs = getValue(this, 'attributes') || {};
-        if (this.id) attrs.id = this.id;
-        if (this.className) attrs['class'] = this.className;
-        this.setElement(this.make(this.tagName, attrs), false);
+        var href = location.href.replace(/(javascript:|#).*$/, '');
+        location.replace(href + '#' + fragment);
       } else {
-        this.setElement(this.el, false);
+        // Some browsers require that `hash` contains a leading #.
+        location.hash = '#' + fragment;
       }
     }
 
   });
 
-  // The self-propagating extend function that Backbone classes use.
-  var extend = function (protoProps, classProps) {
-    var child = inherits(this, protoProps, classProps);
-    child.extend = this.extend;
-    return child;
-  };
-
-  // Set up inheritance for the model, collection, and view.
-  Model.extend = Collection.extend = Router.extend = View.extend = extend;
-
-  // Backbone.sync
-  // -------------
-
-  // Map from CRUD to HTTP for our default `Backbone.sync` implementation.
-  var methodMap = {
-    'create': 'POST',
-    'update': 'PUT',
-    'delete': 'DELETE',
-    'read':   'GET'
-  };
-
-  // Override this function to change the manner in which Backbone persists
-  // models to the server. You will be passed the type of request, and the
-  // model in question. By default, makes a RESTful Ajax request
-  // to the model's `url()`. Some possible customizations could be:
-  //
-  // * Use `setTimeout` to batch rapid-fire updates into a single request.
-  // * Send up the models as XML instead of JSON.
-  // * Persist models via WebSockets instead of Ajax.
-  //
-  // Turn on `Backbone.emulateHTTP` in order to send `PUT` and `DELETE` requests
-  // as `POST`, with a `_method` parameter containing the true HTTP method,
-  // as well as all requests with the body as `application/x-www-form-urlencoded`
-  // instead of `application/json` with the model in a param named `model`.
-  // Useful when interfacing with server-side languages like **PHP** that make
-  // it difficult to read the body of `PUT` requests.
-  Backbone.sync = function(method, model, options) {
-    var type = methodMap[method];
-
-    // Default options, unless specified.
-    options || (options = {});
-
-    // Default JSON-request options.
-    var params = {type: type, dataType: 'json'};
-
-    // Ensure that we have a URL.
-    if (!options.url) {
-      params.url = getValue(model, 'url') || urlError();
-    }
-
-    // Ensure that we have the appropriate request data.
-    if (!options.data && model && (method == 'create' || method == 'update')) {
-      params.contentType = 'application/json';
-      params.data = JSON.stringify(model.toJSON());
-    }
-
-    // For older servers, emulate JSON by encoding the request into an HTML-form.
-    if (Backbone.emulateJSON) {
-      params.contentType = 'application/x-www-form-urlencoded';
-      params.data = params.data ? {model: params.data} : {};
-    }
-
-    // For older servers, emulate HTTP by mimicking the HTTP method with `_method`
-    // And an `X-HTTP-Method-Override` header.
-    if (Backbone.emulateHTTP) {
-      if (type === 'PUT' || type === 'DELETE') {
-        if (Backbone.emulateJSON) params.data._method = type;
-        params.type = 'POST';
-        params.beforeSend = function(xhr) {
-          xhr.setRequestHeader('X-HTTP-Method-Override', type);
-        };
-      }
-    }
-
-    // Don't process data on a non-GET request.
-    if (params.type !== 'GET' && !Backbone.emulateJSON) {
-      params.processData = false;
-    }
-
-    // Make the request, allowing the user to override any Ajax options.
-    return $.ajax(_.extend(params, options));
-  };
-
-  // Wrap an optional error callback with a fallback error event.
-  Backbone.wrapError = function(onError, originalModel, options) {
-    return function(model, resp) {
-      resp = model === originalModel ? resp : model;
-      if (onError) {
-        onError(originalModel, resp, options);
-      } else {
-        originalModel.trigger('error', originalModel, resp, options);
-      }
-    };
-  };
+  // Create the default Backbone.history.
+  Backbone.history = new History;
 
   // Helpers
   // -------
 
-  // Shared empty constructor function to aid in prototype-chain creation.
-  var ctor = function(){};
-
   // Helper function to correctly set up the prototype chain, for subclasses.
   // Similar to `goog.inherits`, but uses a hash of prototype properties and
   // class properties to be extended.
-  var inherits = function(parent, protoProps, staticProps) {
+  var extend = function(protoProps, staticProps) {
+    var parent = this;
     var child;
 
     // The constructor function for the new subclass is either defined by you
     // (the "constructor" property in your `extend` definition), or defaulted
     // by us to simply call the parent's constructor.
-    if (protoProps && protoProps.hasOwnProperty('constructor')) {
+    if (protoProps && _.has(protoProps, 'constructor')) {
       child = protoProps.constructor;
     } else {
-      child = function(){ parent.apply(this, arguments); };
+      child = function(){ return parent.apply(this, arguments); };
     }
 
-    // Inherit class (static) properties from parent.
-    _.extend(child, parent);
+    // Add static properties to the constructor function, if supplied.
+    _.extend(child, parent, staticProps);
 
     // Set the prototype chain to inherit from `parent`, without calling
     // `parent`'s constructor function.
-    ctor.prototype = parent.prototype;
-    child.prototype = new ctor();
+    var Surrogate = function(){ this.constructor = child; };
+    Surrogate.prototype = parent.prototype;
+    child.prototype = new Surrogate;
 
     // Add prototype properties (instance properties) to the subclass,
     // if supplied.
     if (protoProps) _.extend(child.prototype, protoProps);
 
-    // Add static properties to the constructor function, if supplied.
-    if (staticProps) _.extend(child, staticProps);
-
-    // Correctly set child's `prototype.constructor`.
-    child.prototype.constructor = child;
-
-    // Set a convenience property in case the parent's prototype is needed later.
+    // Set a convenience property in case the parent's prototype is needed
+    // later.
     child.__super__ = parent.prototype;
 
     return child;
   };
 
-  // Helper function to get a value from a Backbone object as a property
-  // or as a function.
-  var getValue = function(object, prop) {
-    if (!(object && object[prop])) return null;
-    return _.isFunction(object[prop]) ? object[prop]() : object[prop];
-  };
+  // Set up inheritance for the model, collection, router, view and history.
+  Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend;
 
   // Throw an error when a URL is needed, and none is supplied.
   var urlError = function() {
     throw new Error('A "url" property or function must be specified');
   };
 
+  // Wrap an optional error callback with a fallback error event.
+  var wrapError = function (model, options) {
+    var error = options.error;
+    options.error = function(resp) {
+      if (error) error(model, resp, options);
+      model.trigger('error', model, resp, options);
+    };
+  };
+
 }).call(this);

labs/dependency-examples/backbone_marionette_require/css/custom.css

-#todoapp.filter-active #todo-list .completed {
-  display:none
-}
-#todoapp.filter-completed #todo-list .active {
-  display:none
-}
-
-#main, #footer {
-  display : none;
+#todoapp.filter-active #todo-list .completed,
+#todoapp.filter-completed #todo-list .active,
+#main,
+#footer {
+	display : none;
 }

labs/dependency-examples/backbone_marionette_require/index-dev.html

-<!doctype html>
-<html lang="en" data-framework="marionettejs">
-<head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-	<title>Backbone.Marionette & Requirejs • TodoMVC</title>
-	<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
-	<link rel="stylesheet" href="css/custom.css">
-</head>
-<body>
-	<section id="todoapp">
-		<header id="header">
-		</header>
-		<section id="main">
-		</section>
-		<footer id="footer">
-		</footer>
-	</section>
-	<footer id="info">
-		<p>Double-click to edit a todo</p>
-		<p>Created by <a href="http://github.com/jsoverson">Jarrod Overson</a></p>
-		<p><a href="index.html">View the built version</a></p>
-	</footer>
-	<script src="bower_components/todomvc-common/base.js"></script>
-	<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
-</body>
-</html>

labs/dependency-examples/backbone_marionette_require/index.html

@@ -19,9 +19,8 @@
 	<footer id="info">
 		<p>Double-click to edit a todo</p>
 		<p>Created by <a href="http://github.com/jsoverson">Jarrod Overson</a></p>
-		<p><a href="index-dev.html">View the unbuilt version</a></p>
 	</footer>
 	<script src="bower_components/todomvc-common/base.js"></script>
-	<script data-main="js/main.built" src="bower_components/requirejs/require.js"></script>
+	<script data-main="js/main" src="bower_components/requirejs/require.js"></script>
 </body>
 </html>

labs/dependency-examples/backbone_marionette_require/js/app.js

-/*global $*/
-define(
-  ['marionette','vent','collections/TodoList','views/Header','views/TodoListCompositeView','views/Footer'],
-  function(marionette, vent, TodoList, Header, TodoListCompositeView, Footer){
-    "use strict";
-
-    var app = new marionette.Application(),
-        todoList = new TodoList();
-
-    app.bindTo(todoList, 'all', function() {
-      if (todoList.length === 0) {
-        app.main.$el.hide();
-        app.footer.$el.hide();
-      } else {
-        app.main.$el.show();
-        app.footer.$el.show();
-      }
-    });
-
-    app.addRegions({
-      header : '#header',
-      main   : '#main',
-      footer : '#footer'
-    });
-
-    app.addInitializer(function(){
-
-      var viewOptions = {
-        collection : todoList
-      };
-
-      app.header.show(new Header(viewOptions));
-      app.main.show(new TodoListCompositeView(viewOptions));
-      app.footer.show(new Footer(viewOptions));
-
-      todoList.fetch();
-    });
-
-
-    vent.on('todoList:filter',function(filter) {
-      filter = filter || 'all';
-      $('#todoapp').attr('class', 'filter-' + filter);
-    });
-
-    vent.on('todoList:clear:completed',function(){
-      function destroy(todo)     { todo.destroy(); }
-
-      todoList.getCompleted().forEach(destroy);
-    });
-
-    return app;
-
-  }
-);
+/*global define */
+
+define([
+	'marionette',
+	'collections/TodoList',
+	'views/Header',
+	'views/TodoListCompositeView',
+	'views/Footer'
+], function (Marionette, TodoList, Header, TodoListCompositeView, Footer) {
+	'use strict';
+
+	var app = new Marionette.Application();
+	var todoList = new TodoList();
+
+	var viewOptions = {
+		collection: todoList
+	};
+
+	var header = new Header(viewOptions);
+	var main = new TodoListCompositeView(viewOptions);
+	var footer = new Footer(viewOptions);
+
+	app.addRegions({
+		header: '#header',
+		main: '#main',
+		footer: '#footer'
+	});
+
+	app.addInitializer(function () {
+		app.header.show(header);
+		app.main.show(main);
+		app.footer.show(footer);
+
+		todoList.fetch();
+	});
+
+	app.listenTo(todoList, 'all', function () {
+		app.main.$el.toggle(todoList.length > 0);
+		app.footer.$el.toggle(todoList.length > 0);
+	});
+
+	app.vent.on('todoList:filter', function (filter) {
+		footer.updateFilterSelection(filter);
+
+		document.getElementById('todoapp').className = 'filter-' + (filter === '' ? 'all' : filter);
+	});
+
+	app.vent.on('todoList:clear:completed', function () {
+		todoList.getCompleted().forEach(function (todo) {
+			todo.destroy();
+		});
+	});
+
+	return window.app = app;
+});

labs/dependency-examples/backbone_marionette_require/js/collections/TodoList.js

-define(['backbone','models/Todo','lib/backbone-localStorage'],function(Backbone,Todo) {
-  'use strict';
+/*global define */
 
-  function isCompleted(todo) { return todo.get('completed'); }
+define([
+	'backbone',
+	'models/Todo',
+	'localStorage'
+], function (Backbone, Todo) {
+	'use strict';
 
-  return Backbone.Collection.extend({
-    model: Todo,
-    localStorage: new Backbone.LocalStorage('todos-backbone'),
+	function isCompleted(todo) {
+		return todo.get('completed');
+	}
 
-    getCompleted: function() {
-      return this.filter(isCompleted);
-    },
-    getActive: function() {
-      return this.reject(isCompleted);
-    },
-    comparator: function( todo ) {
-      return todo.get('created');
-    }
-  });
+	return Backbone.Collection.extend({
+		model: Todo,
 
+		localStorage: new Backbone.LocalStorage('todos-backbone'),
+
+		getCompleted: function () {
+			return this.filter(isCompleted);
+		},
+
+		getActive: function () {
+			return this.reject(isCompleted);
+		},
+
+		comparator: function (todo) {
+			return todo.get('created');
+		}
+	});
 });

labs/dependency-examples/backbone_marionette_require/js/controllers/index.js

-/*global define*/
+/*global define */
 
-define(['vent'], function (vent) {
-  "use strict";
+define([
+	'app'
+], function (app) {
+	'use strict';
 
-  return {
-    setFilter : function(param) {
-      vent.trigger('todoList:filter', param.trim() || '');
-    }
-  };
+	return {
+		setFilter: function (param) {
+			app.vent.trigger('todoList:filter', param && param.trim() || '');
+		}
+	};
 });

labs/dependency-examples/backbone_marionette_require/js/lib/backbone-localStorage.js

-/**
- * Backbone localStorage Adapter
- * https://github.com/jeromegn/Backbone.localStorage
- */
-
-(function() {
-  // A simple module to replace `Backbone.sync` with *localStorage*-based
-  // persistence. Models are given GUIDS, and saved into a JSON object. Simple
-  // as that.
-
-  // Hold reference to Underscore.js and Backbone.js in the closure in order
-  // to make things work even if they are removed from the global namespace
-  var _ = this._;
-  var Backbone = this.Backbone;
-
-  // Generate four random hex digits.
-  function S4() {
-    return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
-  };
-
-  // Generate a pseudo-GUID by concatenating random hexadecimal.
-  function guid() {
-    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
-  };
-
-  // Our Store is represented by a single JS object in *localStorage*. Create it
-  // with a meaningful name, like the name you'd give a table.
-  // window.Store is deprectated, use Backbone.LocalStorage instead
-  Backbone.LocalStorage = window.Store = function(name) {
-    this.name = name;
-    var store = this.localStorage().getItem(this.name);
-    this.records = (store && store.split(",")) || [];
-  };
-
-  _.extend(Backbone.LocalStorage.prototype, {
-
-    // Save the current state of the **Store** to *localStorage*.
-    save: function() {
-      this.localStorage().setItem(this.name, this.records.join(","));
-    },
-
-    // Add a model, giving it a (hopefully)-unique GUID, if it doesn't already
-    // have an id of it's own.
-    create: function(model) {
-      if (!model.id) {
-        model.id = guid();
-        model.set(model.idAttribute, model.id);
-      }
-      this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
-      this.records.push(model.id.toString());
-      this.save();
-      return model.toJSON();
-    },
-
-    // Update a model by replacing its copy in `this.data`.
-    update: function(model) {
-      this.localStorage().setItem(this.name+"-"+model.id, JSON.stringify(model));
-      if (!_.include(this.records, model.id.toString())) this.records.push(model.id.toString()); this.save();
-      return model.toJSON();
-    },
-
-    // Retrieve a model from `this.data` by id.
-    find: function(model) {
-      return JSON.parse(this.localStorage().getItem(this.name+"-"+model.id));
-    },
-
-    // Return the array of all models currently in storage.
-    findAll: function() {
-      return _(this.records).chain()
-        .map(function(id){return JSON.parse(this.localStorage().getItem(this.name+"-"+id));}, this)
-        .compact()
-        .value();
-    },
-
-    // Delete a model from `this.data`, returning it.
-    destroy: function(model) {
-      this.localStorage().removeItem(this.name+"-"+model.id);
-      this.records = _.reject(this.records, function(record_id){return record_id == model.id.toString();});
-      this.save();
-      return model;
-    },
-
-    localStorage: function() {
-      return localStorage;
-    }
-
-  });
-
-  // localSync delegate to the model or collection's
-  // *localStorage* property, which should be an instance of `Store`.
-  // window.Store.sync and Backbone.localSync is deprectated, use Backbone.LocalStorage.sync instead
-  Backbone.LocalStorage.sync = window.Store.sync = Backbone.localSync = function(method, model, options, error) {
-    var store = model.localStorage || model.collection.localStorage;
-
-    // Backwards compatibility with Backbone <= 0.3.3
-    if (typeof options == 'function') {
-      options = {
-        success: options,
-        error: error
-      };
-    }
-
-    var resp;
-
-    switch (method) {
-      case "read":    resp = model.id != undefined ? store.find(model) : store.findAll(); break;
-      case "create":  resp = store.create(model);                            break;
-      case "update":  resp = store.update(model);                            break;
-      case "delete":  resp = store.destroy(model);                           break;
-    }
-
-    if (resp) {
-      options.success(resp);
-    } else {
-      options.error("Record not found");
-    }
-  };
-
-  Backbone.ajaxSync = Backbone.sync;
-
-  Backbone.getSyncMethod = function(model) {
-    if(model.localStorage || (model.collection && model.collection.localStorage))
-    {
-      return Backbone.localSync;
-    }
-
-    return Backbone.ajaxSync;
-  };
-
-  // Override 'Backbone.sync' to default to localSync,
-  // the original 'Backbone.sync' is still available in 'Backbone.ajaxSync'
-  Backbone.sync = function(method, model, options, error) {
-    return Backbone.getSyncMethod(model).apply(this, [method, model, options, error]);
-  };
-
-})();

labs/dependency-examples/backbone_marionette_require/js/lib/backbone.marionette.js

-// Backbone.Marionette, v0.9.11
-// Copyright (c)2012 Derick Bailey, Muted Solutions, LLC.
-// Distributed under MIT license
-// http://github.com/derickbailey/backbone.marionette
-Backbone.Marionette = (function(Backbone, _, $){
-  var Marionette = {};
-
-  // EventBinder
-  // -----------
-
-  // The event binder facilitates the binding and unbinding of events
-  // from objects that extend `Backbone.Events`. It makes
-  // unbinding events, even with anonymous callback functions,
-  // easy.
-  //
-  // Inspired by [Johnny Oshika](http://stackoverflow.com/questions/7567404/backbone-js-repopulate-or-recreate-the-view/7607853#7607853)
-
-  Marionette.EventBinder = function(){
-    this._eventBindings = [];
-  };
-
-  _.extend(Marionette.EventBinder.prototype, {
-    // Store the event binding in array so it can be unbound
-    // easily, at a later point in time.
-    bindTo: function (obj, eventName, callback, context) {
-      context = context || this;
-      obj.on(eventName, callback, context);
-
-      var binding = {
-        obj: obj,
-        eventName: eventName,
-        callback: callback,
-        context: context
-      };
-
-      this._eventBindings.push(binding);
-
-      return binding;
-    },
-
-    // Unbind from a single binding object. Binding objects are
-    // returned from the `bindTo` method call.
-    unbindFrom: function(binding){
-      binding.obj.off(binding.eventName, binding.callback, binding.context);
-      this._eventBindings = _.reject(this._eventBindings, function(bind){return bind === binding;});
-    },
-
-    // Unbind all of the events that we have stored.
-    unbindAll: function () {
-      var that = this;
-
-      // The `unbindFrom` call removes elements from the array
-      // while it is being iterated, so clone it first.
-      var bindings = _.map(this._eventBindings, _.identity);
-      _.each(bindings, function (binding, index) {
-        that.unbindFrom(binding);
-      });
-    }
-  });
-
-  // Copy the `extend` function used by Backbone's classes
-  Marionette.EventBinder.extend = Backbone.View.extend;
-
-  // Marionette.View
-  // ---------------
-
-  // The core view type that other Marionette views extend from.
-  Marionette.View = Backbone.View.extend({
-    constructor: function(){
-      var eventBinder = new Marionette.EventBinder();
-      _.extend(this, eventBinder);
-
-      Backbone.View.prototype.constructor.apply(this, arguments);
-
-      this.bindTo(this, "show", this.onShowCalled, this);
-    },
-
-    // Get the template for this view
-    // instance. You can set a `template` attribute in the view
-    // definition or pass a `template: "whatever"` parameter in
-    // to the constructor options.
-    getTemplate: function(){
-      var template;
-
-      // Get the template from `this.options.template` or
-      // `this.template`. The `options` takes precedence.
-      if (this.options && this.options.template){
-        template = this.options.template;
-      } else {
-        template = this.template;
-      }
-
-      return template;
-    },
-
-    // Serialize the model or collection for the view. If a model is
-    // found, `.toJSON()` is called. If a collection is found, `.toJSON()`
-    // is also called, but is used to populate an `items` array in the
-    // resulting data. If both are found, defaults to the model.
-    // You can override the `serializeData` method in your own view
-    // definition, to provide custom serialization for your view's data.
-    serializeData: function(){
-      var data;
-
-      if (this.model) {
-        data = this.model.toJSON();
-      }
-      else if (this.collection) {
-        data = { items: this.collection.toJSON() };
-      }
-
-      data = this.mixinTemplateHelpers(data);
-
-      return data;
-    },
-
-    // Mix in template helper methods. Looks for a
-    // `templateHelpers` attribute, which can either be an
-    // object literal, or a function that returns an object
-    // literal. All methods and attributes from this object
-    // are copies to the object passed in.
-    mixinTemplateHelpers: function(target){
-      target = target || {};
-      var templateHelpers = this.templateHelpers;
-      if (_.isFunction(templateHelpers)){
-        templateHelpers = templateHelpers.call(this);
-      }
-      return _.extend(target, templateHelpers);
-    },
-
-    // Configure `triggers` to forward DOM events to view
-    // events. `triggers: {"click .foo": "do:foo"}`
-    configureTriggers: function(){
-      if (!this.triggers) { return; }
-
-      var triggers = this.triggers;
-      var that = this;
-      var triggerEvents = {};
-
-      // Allow `triggers` to be configured as a function
-      if (_.isFunction(triggers)){ triggers = triggers.call(this); }
-
-      // Configure the triggers, prevent default
-      // action and stop propagation of DOM events
-      _.each(triggers, function(value, key){
-
-        triggerEvents[key] = function(e){
-          if (e && e.preventDefault){ e.preventDefault(); }
-          if (e && e.stopPropagation){ e.stopPropagation(); }
-          that.trigger(value);
-        };
-
-      });
-
-      return triggerEvents;
-    },
-
-    // Overriding Backbone.View's delegateEvents specifically
-    // to handle the `triggers` configuration
-    delegateEvents: function(events){
-      events = events || this.events;
-      if (_.isFunction(events)){ events = events.call(this); }
-
-      var combinedEvents = {};
-      var triggers = this.configureTriggers();
-      _.extend(combinedEvents, events, triggers);
-
-      Backbone.View.prototype.delegateEvents.call(this, combinedEvents);
-    },
-
-    // Internal method, handles the `show` event.
-    onShowCalled: function(){},
-
-    // Default `close` implementation, for removing a view from the
-    // DOM and unbinding it. Regions will call this method
-    // for you. You can specify an `onClose` method in your view to
-    // add custom code that is called after the view is closed.
-    close: function(){
-      if (this.beforeClose) { this.beforeClose(); }
-
-      this.remove();
-
-      if (this.onClose) { this.onClose(); }
-      this.trigger('close');
-      this.unbindAll();
-      this.unbind();
-    },
-
-    // This method binds the elements specified in the "ui" hash inside the view's code with
-    // the associated jQuery selectors.
-    bindUIElements: function(){
-      if (!this.ui) { return; }
-
-      var that = this;
-
-      if (!this.uiBindings) {
-        // We want to store the ui hash in uiBindings, since afterwards the values in the ui hash
-        // will be overridden with jQuery selectors.
-        this.uiBindings = this.ui;
-      }
-
-      // refreshing the associated selectors since they should point to the newly rendered elements.
-      this.ui = {};
-      _.each(_.keys(this.uiBindings), function(key) {
-        var selector = that.uiBindings[key];
-        that.ui[key] = that.$(selector);
-      });
-    }
-
-  });
-
-
-  // Item View
-  // ---------
-
-  // A single item view implementation that contains code for rendering
-  // with underscore.js templates, serializing the view's model or collection,
-  // and calling several methods on extended views, such as `onRender`.
-  Marionette.ItemView =  Marionette.View.extend({
-    constructor: function(){
-      Marionette.View.prototype.constructor.apply(this, arguments);
-
-      if (this.initialEvents){
-        this.initialEvents();
-      }
-    },
-
-    // Render the view, defaulting to underscore.js templates.
-    // You can override this in your view definition to provide
-    // a very specific rendering for your view. In general, though,
-    // you should override the `Marionette.Renderer` object to
-    // change how Marionette renders views.
-    render: function(){
-      if (this.beforeRender){ this.beforeRender(); }
-      this.trigger("before:render", this);
-      this.trigger("item:before:render", this);
-
-      var data = this.serializeData();
-      var template = this.getTemplate();
-      var html = Marionette.Renderer.render(template, data);
-      this.$el.html(html);
-      this.bindUIElements();
-
-      if (this.onRender){ this.onRender(); }
-      this.trigger("render", this);
-      this.trigger("item:rendered", this);
-      return this;
-    },
-
-    // Override the default close event to add a few
-    // more events that are triggered.
-    close: function(){
-      this.trigger('item:before:close');
-      Marionette.View.prototype.close.apply(this, arguments);
-      this.trigger('item:closed');
-    }
-  });
-
-  // Collection View
-  // ---------------
-
-  // A view that iterates over a Backbone.Collection
-  // and renders an individual ItemView for each model.
-  Marionette.CollectionView = Marionette.View.extend({
-    constructor: function(){
-      Marionette.View.prototype.constructor.apply(this, arguments);
-      this.initChildViewStorage();
-      this.initialEvents();
-      this.onShowCallbacks = new Marionette.Callbacks();
-    },
-
-    // Configured the initial events that the collection view
-    // binds to. Override this method to prevent the initial
-    // events, or to add your own initial events.
-    initialEvents: function(){
-      if (this.collection){
-        this.bindTo(this.collection, "add", this.addChildView, this);
-        this.bindTo(this.collection, "remove", this.removeItemView, this);
-        this.bindTo(this.collection, "reset", this.render, this);
-      }
-    },
-
-    // Handle a child item added to the collection
-    addChildView: function(item, collection, options){
-      this.closeEmptyView();
-      var ItemView = this.getItemView();
-      return this.addItemView(item, ItemView, options.index);
-    },
-
-    // Override from `Marionette.View` to guarantee the `onShow` method
-    // of child views is called.
-    onShowCalled: function(){
-      this.onShowCallbacks.run();
-    },
-
-    // Internal method to trigger the before render callbacks
-    // and events
-    triggerBeforeRender: function(){
-      if (this.beforeRender) { this.beforeRender(); }
-      this.trigger("before:render", this);
-      this.trigger("collection:before:render", this);
-    },
-
-    // Internal method to trigger the rendered callbacks and
-    // events
-    triggerRendered: function(){
-      if (this.onRender) { this.onRender(); }
-      this.trigger("render", this);
-      this.trigger("collection:rendered", this);
-    },
-
-    // Render the collection of items. Override this method to
-    // provide your own implementation of a render function for
-    // the collection view.
-    render: function(){
-      this.triggerBeforeRender();
-      this.closeEmptyView();
-      this.closeChildren();
-
-      if (this.collection && this.collection.length > 0) {
-        this.showCollection();
-      } else {
-        this.showEmptyView();
-      }
-
-      this.triggerRendered();
-      return this;
-    },
-
-    // Internal method to loop through each item in the
-    // collection view and show it
-    showCollection: function(){
-      var that = this;
-      var ItemView = this.getItemView();
-      this.collection.each(function(item, index){
-        that.addItemView(item, ItemView, index);
-      });
-    },
-
-    // Internal method to show an empty view in place of
-    // a collection of item views, when the collection is
-    // empty
-    showEmptyView: function(){
-      var EmptyView = this.options.emptyView || this.emptyView;
-      if (EmptyView && !this._showingEmptyView){
-        this._showingEmptyView = true;
-        var model = new Backbone.Model();
-        this.addItemView(model, EmptyView, 0);
-      }
-    },
-
-    // Internal method to close an existing emptyView instance
-    // if one exists. Called when a collection view has been
-    // rendered empty, and then an item is added to the collection.
-    closeEmptyView: function(){
-      if (this._showingEmptyView){
-        this.closeChildren();
-        delete this._showingEmptyView;
-      }
-    },
-
-    // Retrieve the itemView type, either from `this.options.itemView`
-    // or from the `itemView` in the object definition. The "options"
-    // takes precedence.
-    getItemView: function(){
-      var itemView = this.options.itemView || this.itemView;
-
-      if (!itemView){
-        var err = new Error("An `itemView` must be specified");
-        err.name = "NoItemViewError";
-        throw err;
-      }
-
-      return itemView;
-    },
-
-    // Render the child item's view and add it to the
-    // HTML for the collection view.
-    addItemView: function(item, ItemView, index){
-      var that = this;
-
-      var view = this.buildItemView(item, ItemView);
-
-      // Store the child view itself so we can properly
-      // remove and/or close it later
-      this.storeChild(view);
-      if (this.onItemAdded){ this.onItemAdded(view); }
-      this.trigger("item:added", view);
-
-      // Render it and show it
-      var renderResult = this.renderItemView(view, index);
-
-      // call onShow for child item views
-      if (view.onShow){
-        this.onShowCallbacks.add(view.onShow, view);
-      }
-
-      // Forward all child item view events through the parent,
-      // prepending "itemview:" to the event name
-      var childBinding = this.bindTo(view, "all", function(){
-        var args = slice.call(arguments);
-        args[0] = "itemview:" + args[0];
-        args.splice(1, 0, view);
-
-        that.trigger.apply(that, args);
-      });
-
-      // Store all child event bindings so we can unbind
-      // them when removing / closing the child view
-      this.childBindings = this.childBindings || {};
-      this.childBindings[view.cid] = childBinding;
-
-      return renderResult;
-    },
-
-    // render the item view
-    renderItemView: function(view, index) {
-      view.render();
-      this.appendHtml(this, view, index);
-    },
-
-    // Build an `itemView` for every model in the collection.
-    buildItemView: function(item, ItemView){
-      var itemViewOptions = _.result(this, "itemViewOptions");
-      var options = _.extend({model: item}, itemViewOptions);
-      var view = new ItemView(options);
-      return view;
-    },
-
-    // Remove the child view and close it
-    removeItemView: function(item){
-      var view = this.children[item.cid];
-      if (view){
-        var childBinding = this.childBindings[view.cid];
-        if (childBinding) {
-          this.unbindFrom(childBinding);
-          delete this.childBindings[view.cid];
-        }
-        view.close();
-        delete this.children[item.cid];
-      }
-
-      if (!this.collection || this.collection.length === 0){
-        this.showEmptyView();
-      }
-
-      this.trigger("item:removed", view);
-    },
-
-    // Append the HTML to the collection's `el`.
-    // Override this method to do something other
-    // then `.append`.
-    appendHtml: function(collectionView, itemView, index){
-      collectionView.$el.append(itemView.el);
-    },
-
-    // Store references to all of the child `itemView`
-    // instances so they can be managed and cleaned up, later.
-    storeChild: function(view){
-      this.children[view.model.cid] = view;
-    },
-
-    // Internal method to set up the `children` object for
-    // storing all of the child views
-    initChildViewStorage: function(){
-      this.children = {};
-    },
-
-    // Handle cleanup and other closing needs for
-    // the collection of views.
-    close: function(){
-      this.trigger("collection:before:close");
-      this.closeChildren();
-      Marionette.View.prototype.close.apply(this, arguments);
-      this.trigger("collection:closed");
-    },
-
-    // Close the child views that this collection view
-    // is holding on to, if any
-    closeChildren: function(){
-      var that = this;
-      if (this.children){
-        _.each(_.clone(this.children), function(childView){
-          that.removeItemView(childView.model);
-        });
-      }
-    }
-  });
-
-
-  // Composite View
-  // --------------
-
-  // Used for rendering a branch-leaf, hierarchical structure.
-  // Extends directly from CollectionView and also renders an
-  // an item view as `modelView`, for the top leaf
-  Marionette.CompositeView = Marionette.CollectionView.extend({
-    constructor: function(options){
-      Marionette.CollectionView.apply(this, arguments);
-      this.itemView = this.getItemView();
-    },
-
-    // Configured the initial events that the composite view
-    // binds to. Override this method to prevent the initial
-    // events, or to add your own initial events.
-    initialEvents: function(){
-      if (this.collection){
-        this.bindTo(this.collection, "add", this.addChildView, this);
-        this.bindTo(this.collection, "remove", this.removeItemView, this);
-        this.bindTo(this.collection, "reset", this.renderCollection, this);
-      }
-    },
-
-    // Retrieve the `itemView` to be used when rendering each of
-    // the items in the collection. The default is to return
-    // `this.itemView` or Marionette.CompositeView if no `itemView`
-    // has been defined
-    getItemView: function(){
-      return this.itemView || this.constructor;
-    },
-
-    // Renders the model once, and the collection once. Calling
-    // this again will tell the model's view to re-render itself
-    // but the collection will not re-render.
-    render: function(){
-      var that = this;
-
-      this.resetItemViewContainer();
-
-      var html = this.renderModel();
-      this.$el.html(html);
-      // the ui bindings is done here and not at the end of render since they should be
-      // available before the collection is rendered.
-      this.bindUIElements();
-      this.trigger("composite:model:rendered");
-      this.trigger("render");
-
-      this.renderCollection();
-      this.trigger("composite:rendered");
-      return this;
-    },
-
-    // Render the collection for the composite view
-    renderCollection: function(){
-      Marionette.CollectionView.prototype.render.apply(this, arguments);
-      this.trigger("composite:collection:rendered");
-    },
-
-    // Render an individual model, if we have one, as
-    // part of a composite view (branch / leaf). For example:
-    // a treeview.
-    renderModel: function(){
-      var data = {};
-      data = this.serializeData();
-
-      var template = this.getTemplate();
-      return Marionette.Renderer.render(template, data);
-    },
-
-    // Appends the `el` of itemView instances to the specified
-    // `itemViewContainer` (a jQuery selector). Override this method to
-    // provide custom logic of how the child item view instances have their
-    // HTML appended to the composite view instance.
-    appendHtml: function(cv, iv){
-      var $container = this.getItemViewContainer(cv);
-      $container.append(iv.el);
-    },
-
-    // Internal method to ensure an `$itemViewContainer` exists, for the
-    // `appendHtml` method to use.
-    getItemViewContainer: function(containerView){
-      var container;
-      if ("$itemViewContainer" in containerView){
-        container = containerView.$itemViewContainer;
-      } else {
-        if (containerView.itemViewContainer){
-          container = containerView.$(_.result(containerView, "itemViewContainer"));
-
-          if (container.length <= 0) {
-            var err = new Error("Missing `itemViewContainer`");
-            err.name = "ItemViewContainerMissingError";
-            throw err;
-          }
-        } else {
-          container = containerView.$el;
-        }
-        containerView.$itemViewContainer = container;
-      }
-      return container;
-    },
-
-    // Internal method to reset the `$itemViewContainer` on render
-    resetItemViewContainer: function(){
-      if (this.$itemViewContainer){
-        delete this.$itemViewContainer;
-      }
-    }
-  });
-
-
-  // Region
-  // ------
-
-  // Manage the visual regions of your composite application. See
-  // http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/
-  Marionette.Region = function(options){
-    this.options = options || {};
-
-    var eventBinder = new Marionette.EventBinder();
-    _.extend(this, eventBinder, options);
-
-    if (!this.el){
-      var err = new Error("An 'el' must be specified");
-      err.name = "NoElError";
-      throw err;
-    }
-
-    if (this.initialize){
-      this.initialize.apply(this, arguments);
-    }
-  };
-
-  _.extend(Marionette.Region.prototype, Backbone.Events, {
-
-    // Displays a backbone view instance inside of the region.
-    // Handles calling the `render` method for you. Reads content
-    // directly from the `el` attribute. Also calls an optional
-    // `onShow` and `close` method on your view, just after showing
-    // or just before closing the view, respectively.
-    show: function(view){
-
-      this.ensureEl();
-      this.close();
-
-      view.render();
-      this.open(view);
-
-      if (view.onShow) { view.onShow(); }
-      view.trigger("show");
-
-      if (this.onShow) { this.onShow(view); }
-      this.trigger("view:show", view);
-
-      this.currentView = view;
-    },
-
-    ensureEl: function(){
-      if (!this.$el || this.$el.length === 0){
-        this.$el = this.getEl(this.el);
-      }
-    },
-
-    // Override this method to change how the region finds the
-    // DOM element that it manages. Return a jQuery selector object.
-    getEl: function(selector){
-      return $(selector);
-    },
-
-    // Override this method to change how the new view is
-    // appended to the `$el` that the region is managing
-    open: function(view){
-      this.$el.html(view.el);
-    },
-
-    // Close the current view, if there is one. If there is no
-    // current view, it does nothing and returns immediately.
-    close: function(){
-      var view = this.currentView;
-      if (!view){ return; }
-
-      if (view.close) { view.close(); }
-      this.trigger("view:closed", view);
-
-      delete this.currentView;
-    },
-
-    // Attach an existing view to the region. This
-    // will not call `render` or `onShow` for the new view,
-    // and will not replace the current HTML for the `el`
-    // of the region.
-    attachView: function(view){
-      this.currentView = view;
-    },
-
-    // Reset the region by closing any existing view and
-    // clearing out the cached `$el`. The next time a view
-    // is shown via this region, the region will re-query the
-    // DOM for the region's `el`.
-    reset: function(){
-      this.close();
-      delete this.$el;
-    }
-  });
-
-  // Copy the `extend` function used by Backbone's classes
-  Marionette.Region.extend = Backbone.View.extend;
-
-  // Layout
-  // ------
-
-  // Used for managing application layouts, nested layouts and
-  // multiple regions within an application or sub-application.
-  //
-  // A specialized view type that renders an area of HTML and then
-  // attaches `Region` instances to the specified `regions`.
-  // Used for composite view management and sub-application areas.
-  Marionette.Layout = Marionette.ItemView.extend({
-    regionType: Marionette.Region,
-
-    constructor: function () {
-      Backbone.Marionette.ItemView.apply(this, arguments);
-      this.initializeRegions();
-    },
-
-    // Layout's render will use the existing region objects the
-    // first time it is called. Subsequent calls will close the
-    // views that the regions are showing and then reset the `el`
-    // for the regions to the newly rendered DOM elements.
-    render: function(){
-      var result = Marionette.ItemView.prototype.render.apply(this, arguments);
-
-      // Rewrite this function to handle re-rendering and
-      // re-initializing the `el` for each region
-      this.render = function(){
-        this.closeRegions();
-        this.reInitializeRegions();
-
-        var result = Marionette.ItemView.prototype.render.apply(this, arguments);
-        return result;
-      };
-
-      return result;
-    },
-
-    // Handle closing regions, and then close the view itself.
-    close: function () {
-      this.closeRegions();
-      this.destroyRegions();
-      Backbone.Marionette.ItemView.prototype.close.call(this, arguments);
-    },
-
-    // Initialize the regions that have been defined in a
-    // `regions` attribute on this layout. The key of the
-    // hash becomes an attribute on the layout object directly.
-    // For example: `regions: { menu: ".menu-container" }`
-    // will product a `layout.menu` object which is a region
-    // that controls the `.menu-container` DOM element.
-    initializeRegions: function () {
-      if (!this.regionManagers){
-        this.regionManagers = {};
-      }
-
-      var that = this;
-      _.each(this.regions, function (region, name) {
-        if (    typeof region != 'string'
-          && typeof region.selector != 'string' ) {
-          throw new Exception('Region must be specified as a selector ' +
-            'string or an object with selector property');
-        }
-
-        var selector = typeof region === 'string' ? region : region.selector;
-        var regionType = typeof region.regionType === 'undefined'
-          ? that.regionType : region.regionType;
-
-        var regionManager = new regionType({
-          el: selector,
-          getEl: function(selector){
-            return that.$(selector);
-          }
-        });
-
-        that.regionManagers[name] = regionManager;
-        that[name] = regionManager;
-      });
-
-    },
-
-    // Re-initialize all of the regions by updating the `el` that
-    // they point to
-    reInitializeRegions: function(){
-      if (this.regionManagers && _.size(this.regionManagers)===0){
-        this.initializeRegions();
-      } else {
-        _.each(this.regionManagers, function(region){
-          region.reset();
-        });
-      }
-    },
-
-    // Close all of the regions that have been opened by
-    // this layout. This method is called when the layout
-    // itself is closed.
-    closeRegions: function () {
-      var that = this;
-      _.each(this.regionManagers, function (manager, name) {
-        manager.close();
-      });
-    },
-
-    // Destroys all of the regions by removing references
-    // from the Layout
-    destroyRegions: function(){
-      var that = this;
-      _.each(this.regionManagers, function (manager, name) {
-        delete that[name];
-      });
-      this.regionManagers = {};
-    }
-  });
-
-
-  // Application
-  // -----------
-
-  // Contain and manage the composite application as a whole.
-  // Stores and starts up `Region` objects, includes an
-  // event aggregator as `app.vent`
-  Marionette.Application = function(options){
-    this.initCallbacks = new Marionette.Callbacks();
-    this.vent = new Marionette.EventAggregator();
-    this.submodules = {};
-
-    var eventBinder = new Marionette.EventBinder();
-    _.extend(this, eventBinder, options);
-  };
-
-  _.extend(Marionette.Application.prototype, Backbone.Events, {
-    // Add an initializer that is either run at when the `start`
-    // method is called, or run immediately if added after `start`
-    // has already been called.
-    addInitializer: function(initializer){
-      this.initCallbacks.add(initializer);
-    },
-
-    // kick off all of the application's processes.
-    // initializes all of the regions that have been added
-    // to the app, and runs all of the initializer functions
-    start: function(options){
-      this.trigger("initialize:before", options);
-      this.initCallbacks.run(options, this);
-      this.trigger("initialize:after", options);
-
-      this.trigger("start", options);
-    },
-
-    // Add regions to your app.
-    // Accepts a hash of named strings or Region objects
-    // addRegions({something: "#someRegion"})
-    // addRegions{{something: Region.extend({el: "#someRegion"}) });
-    addRegions: function(regions){
-      var regionValue, regionObj, region;
-
-      for(region in regions){
-        if (regions.hasOwnProperty(region)){
-          regionValue = regions[region];
-
-          if (typeof regionValue === "string"){
-            regionObj = new Marionette.Region({
-              el: regionValue
-            });
-          } else {
-            regionObj = new regionValue();
-          }
-
-          this[region] = regionObj;
-        }
-      }
-    },
-
-    // Removes a region from your app.
-    // Accepts the regions name
-    // removeRegion('myRegion')
-    removeRegion: function(region) {
-      this[region].close();
-      delete this[region];
-    },
-
-    // Create a module, attached to the application
-    module: function(moduleNames, moduleDefinition){
-      // slice the args, and add this application object as the
-      // first argument of the array
-      var args = slice.call(arguments);
-      args.unshift(this);
-
-      // see the Marionette.Module object for more information
-      return Marionette.Module.create.apply(Marionette.Module, args);
-    }
-  });
-
-  // Copy the `extend` function used by Backbone's classes
-  Marionette.Application.extend = Backbone.View.extend;
-
-  // AppRouter
-  // ---------
-
-  // Reduce the boilerplate code of handling route events
-  // and then calling a single method on another object.
-  // Have your routers configured to call the method on
-  // your object, directly.
-  //
-  // Configure an AppRouter with `appRoutes`.
-  //
-  // App routers can only take one `controller` object.
-  // It is recommended that you divide your controller
-  // objects in to smaller peices of related functionality
-  // and have multiple routers / controllers, instead of
-  // just one giant router and controller.
-  //
-  // You can also add standard routes to an AppRouter.
-
-  Marionette.AppRouter = Backbone.Router.extend({
-
-    constructor: function(options){
-      Backbone.Router.prototype.constructor.call(this, options);
-
-      if (this.appRoutes){
-        var controller = this.controller;
-        if (options && options.controller) {
-          controller = options.controller;
-        }
-        this.processAppRoutes(controller, this.appRoutes);
-      }
-    },
-
-    // Internal method to process the `appRoutes` for the
-    // router, and turn them in to routes that trigger the
-    // specified method on the specified `controller`.
-    processAppRoutes: function(controller, appRoutes){
-      var method, methodName;
-      var route, routesLength, i;
-      var routes = [];
-      var router = this;
-
-      for(route in appRoutes){
-        if (appRoutes.hasOwnProperty(route)){
-          routes.unshift([route, appRoutes[route]]);
-        }
-      }
-
-      routesLength = routes.length;
-      for (i = 0; i < routesLength; i++){
-        route = routes[i][0];
-        methodName = routes[i][1];
-        method = controller[methodName];
-
-        if (!method){
-          var msg = "Method '" + methodName + "' was not found on the controller";
-          var err = new Error(msg);
-          err.name = "NoMethodError";
-          throw err;
-        }
-
-        method = _.bind(method, controller);
-        router.route(route, methodName, method);
-      }
-    }
-  });
-
-
-  // Module
-  // ------
-
-  // A simple module system, used to create privacy and encapsulation in
-  // Marionette applications
-  Marionette.Module = function(moduleName, app, customArgs){
-    this.moduleName = moduleName;
-
-    // store sub-modules
-    this.submodules = {};
-
-    this._setupInitializersAndFinalizers();
-
-    // store the configuration for this module
-    this._config = {};
-    this._config.app = app;
-    this._config.customArgs = customArgs;
-    this._config.definitions = [];
-
-    // extend this module with an event binder
-    var eventBinder = new Marionette.EventBinder();
-    _.extend(this, eventBinder);
-  };
-
-  // Extend the Module prototype with events / bindTo, so that the module
-  // can be used as an event aggregator or pub/sub.
-  _.extend(Marionette.Module.prototype, Backbone.Events, {
-
-    // Initializer for a specific module. Initializers are run when the
-    // module's `start` method is called.
-    addInitializer: function(callback){
-      this._initializerCallbacks.add(callback);
-    },
-
-    // Finalizers are run when a module is stopped. They are used to teardown
-    // and finalize any variables, references, events and other code that the
-    // module had set up.
-    addFinalizer: function(callback){
-      this._finalizerCallbacks.add(callback);
-    },
-
-    // Start the module, and run all of it's initializers
-    start: function(options){
-      // Prevent re-start the module
-      if (this._isInitialized){ return; }
-
-      this._runModuleDefinition();
-      this._initializerCallbacks.run(options, this);
-      this._isInitialized = true;
-
-      // start the sub-modules
-      if (this.submodules){
-        _.each(this.submodules, function(mod){
-          mod.start(options);
-        });
-      }
-    },
-
-    // Stop this module by running its finalizers and then stop all of
-    // the sub-modules for this module
-    stop: function(){
-      // if we are not initialized, don't bother finalizing
-      if (!this._isInitialized){ return; }
-      this._isInitialized = false;
-
-      // run the finalizers
-      this._finalizerCallbacks.run();
-      // then reset the initializers and finalizers
-      this._setupInitializersAndFinalizers();
-
-      // stop the sub-modules
-      _.each(this.submodules, function(mod){ mod.stop(); });
-    },
-
-    // Configure the module with a definition function and any custom args
-    // that are to be passed in to the definition function
-    addDefinition: function(moduleDefinition){
-      this._config.definitions.push(moduleDefinition);
-    },
-
-    // Internal method: run the module definition function with the correct
-    // arguments
-    _runModuleDefinition: function(){
-      if (this._config.definitions.length === 0) { return; }
-
-      // build the correct list of arguments for the module definition
-      var args = _.flatten([
-        this,
-        this._config.app,
-        Backbone,
-        Marionette,
-        $, _,
-        this._config.customArgs
-      ]);
-
-      // run the module definition function with the correct args
-      var definitionCount = this._config.definitions.length-1;
-      for(var i=0; i <= definitionCount; i++){
-
-        var definition = this._config.definitions[i];
-        definition.apply(this, args);
-
-      }
-    },
-
-    // Internal method: set up new copies of initializers and finalizers.
-    // Calling this method will wipe out all existing initializers and
-    // finalizers.
-    _setupInitializersAndFinalizers: function(){
-      this._initializerCallbacks = new Marionette.Callbacks();
-      this._finalizerCallbacks = new Marionette.Callbacks();
-    }
-  });
-
-  // Function level methods to create modules
-  _.extend(Marionette.Module, {
-
-    // Create a module, hanging off the app parameter as the parent object.
-    create: function(app, moduleNames, moduleDefinition){
-      var that = this;
-      var parentModule = app;
-      moduleNames = moduleNames.split(".");
-
-      // get the custom args passed in after the module definition and
-      // get rid of the module name and definition function
-      var customArgs = slice.apply(arguments);
-      customArgs.splice(0, 3);
-
-      // Loop through all the parts of the module definition
-      var length = moduleNames.length;
-      _.each(moduleNames, function(moduleName, i){
-        var isLastModuleInChain = (i === length-1);
-
-        // Get an existing module of this name if we have one
-        var module = parentModule[moduleName];
-        if (!module){
-          // Create a new module if we don't have one
-          module = new Marionette.Module(moduleName, app, customArgs);
-          parentModule[moduleName] = module;
-          // store the module on the parent
-          parentModule.submodules[moduleName] = module;
-        }
-
-        // Only add a module definition and initializer when this is
-        // the last module in a "parent.child.grandchild" hierarchy of
-        // module names
-        if (isLastModuleInChain ){
-          that._createModuleDefinition(module, moduleDefinition, app);
-        }
-
-        // Reset the parent module so that the next child
-        // in the list will be added to the correct parent
-        parentModule = module;
-      });
-
-      // Return the last module in the definition chain
-      return parentModule;
-    },
-
-    _createModuleDefinition: function(module, moduleDefinition, app){
-      var moduleOptions = this._getModuleDefinitionOptions(moduleDefinition);
-
-      // add the module definition
-      if (moduleOptions.definition){
-        module.addDefinition(moduleOptions.definition);
-      }
-
-      if (moduleOptions.startWithApp){
-        // start the module when the app starts
-        app.addInitializer(function(options){
-          module.start(options);
-        });
-      }
-    },
-
-    _getModuleDefinitionOptions: function(moduleDefinition){
-      // default to starting the module with the app
-      var options = { startWithApp: true };
-
-      // short circuit if we don't have a module definition
-      if (!moduleDefinition){ return options; }
-
-      if (_.isFunction(moduleDefinition)){
-        // if the definition is a function, assign it directly
-        // and use the defaults
-        options.definition = moduleDefinition;
-
-      } else {
-
-        // the definition is an object. grab the "define" attribute
-        // and the "startWithApp" attribute, as set the options
-        // appropriately
-        options.definition = moduleDefinition.define;
-        if (moduleDefinition.hasOwnProperty("startWithApp")){
-          options.startWithApp = moduleDefinition.startWithApp;
-        }
-      }
-
-      return options;
-    }
-  });
-
-  // Template Cache
-  // --------------
-
-  // Manage templates stored in `<script>` blocks,
-  // caching them for faster access.
-  Marionette.TemplateCache = function(templateId){
-    this.templateId = templateId;
-  };
-
-  // TemplateCache object-level methods. Manage the template
-  // caches from these method calls instead of creating
-  // your own TemplateCache instances
-  _.extend(Marionette.TemplateCache, {
-    templateCaches: {},
-
-    // Get the specified template by id. Either
-    // retrieves the cached version, or loads it
-    // from the DOM.
-    get: function(templateId){
-      var that = this;
-      var cachedTemplate = this.templateCaches[templateId];
-
-      if (!cachedTemplate){
-        cachedTemplate = new Marionette.TemplateCache(templateId);
-        this.templateCaches[templateId] = cachedTemplate;
-      }
-
-      return cachedTemplate.load();
-    },
-
-    // Clear templates from the cache. If no arguments
-    // are specified, clears all templates:
-    // `clear()`
-    //
-    // If arguments are specified, clears each of the
-    // specified templates from the cache:
-    // `clear("#t1", "#t2", "...")`
-    clear: function(){
-      var i;
-      var length = arguments.length;
-
-      if (length > 0){
-        for(i=0; i<length; i++){
-          delete this.templateCaches[arguments[i]];
-        }
-      } else {
-        this.templateCaches = {};
-      }
-    }
-  });
-
-  // TemplateCache instance methods, allowing each
-  // template cache object to manage it's own state
-  // and know whether or not it has been loaded
-  _.extend(Marionette.TemplateCache.prototype, {
-
-    // Internal method to load the template asynchronously.
-    load: function(){
-      var that = this;
-
-      // Guard clause to prevent loading this template more than once
-      if (this.compiledTemplate){
-        return this.compiledTemplate;
-      }
-
-      // Load the template and compile it
-      var template = this.loadTemplate(this.templateId);
-      this.compiledTemplate = this.compileTemplate(template);
-
-      return this.compiledTemplate;
-    },
-
-    // Load a template from the DOM, by default. Override
-    // this method to provide your own template retrieval,
-    // such as asynchronous loading from a server.
-    loadTemplate: function(templateId){
-      var template = $(templateId).html();
-
-      if (!template || template.length === 0){
-        var msg = "Could not find template: '" + templateId + "'";
-        var err = new Error(msg);
-        err.name = "NoTemplateError";
-        throw err;
-      }
-
-      return template;
-    },
-
-    // Pre-compile the template before caching it. Override
-    // this method if you do not need to pre-compile a template
-    // (JST / RequireJS for example) or if you want to change
-    // the template engine used (Handebars, etc).
-    compileTemplate: function(rawTemplate){
-      return _.template(rawTemplate);
-    }
-  });
-
-
-  // Renderer
-  // --------
-
-  // Render a template with data by passing in the template
-  // selector and the data to render.
-  Marionette.Renderer = {
-
-    // Render a template with data. The `template` parameter is
-    // passed to the `TemplateCache` object to retrieve the
-    // template function. Override this method to provide your own
-    // custom rendering and template handling for all of Marionette.
-    render: function(template, data){
-      var templateFunc = typeof template === 'function' ? template : Marionette.TemplateCache.get(template);
-      var html = templateFunc(data);
-      return html;
-    }
-  };
-
-
-  // Callbacks
-  // ---------
-
-  // A simple way of managing a collection of callbacks
-  // and executing them at a later point in time, using jQuery's
-  // `Deferred` object.
-  Marionette.Callbacks = function(){
-    this.deferred = $.Deferred();
-    this.promise = this.deferred.promise();
-  };
-
-  _.extend(Marionette.Callbacks.prototype, {
-
-    // Add a callback to be executed. Callbacks added here are
-    // guaranteed to execute, even if they are added after the
-    // `run` method is called.
-    add: function(callback, contextOverride){
-      this.promise.done(function(context, options){
-        if (contextOverride){ context = contextOverride; }
-        callback.call(context, options);
-      });
-    },
-
-    // Run all registered callbacks with the context specified.
-    // Additional callbacks can be added after this has been run
-    // and they will still be executed.
-    run: function(options, context){
-      this.deferred.resolve(context, options);
-    }
-  });
-
-
-  // Event Aggregator
-  // ----------------
-
-  // A pub-sub object that can be used to decouple various parts
-  // of an application through event-driven architecture.
-  Marionette.EventAggregator = Marionette.EventBinder.extend({
-
-    // Extend any provided options directly on to the event binder
-    constructor: function(options){
-      Marionette.EventBinder.apply(this, arguments);
-      _.extend(this, options);
-    },
-
-    // Override the `bindTo` method to ensure that the event aggregator
-    // is used as the event binding storage
-    bindTo: function(eventName, callback, context){
-      return Marionette.EventBinder.prototype.bindTo.call(this, this, eventName, callback, context);
-    }
-  });
-
-  // Copy the basic Backbone.Events on to the event aggregator
-  _.extend(Marionette.EventAggregator.prototype, Backbone.Events);
-
-  // Copy the `extend` function used by Backbone's classes
-  Marionette.EventAggregator.extend = Backbone.View.extend;
-
-
-  // Helpers
-  // -------
-
-  // For slicing `arguments` in functions
-  var slice = Array.prototype.slice;
-
-
-  return Marionette;
-})(Backbone, _, window.jQuery || window.Zepto || window.ender);

labs/dependency-examples/backbone_marionette_require/js/main.js

 require.config({
-  paths : {
-    underscore : '../bower_components/underscore/underscore',
-    backbone   : 'lib/backbone',
-    marionette : 'lib/backbone.marionette',
-    jquery     : '../bower_components/jquery/jquery',
-    tpl        : 'lib/tpl'
-  },
-  shim : {
-    'lib/backbone-localStorage' : ['backbone'],
-    underscore : {
-      exports : '_'
-    },
-    backbone : {
-      exports : 'Backbone',
-      deps : ['jquery','underscore']
-    },
-    marionette : {
-      exports : 'Backbone.Marionette',
-      deps : ['backbone']
-    }
-  },
-  deps : ['jquery','underscore']
+	paths: {
+		underscore: '../bower_components/underscore/underscore',
+		backbone: '../bower_components/backbone/backbone',
+		marionette: '../bower_components/backbone.marionette/lib/backbone.marionette',
+		jquery: '../bower_components/jquery/jquery',
+		localStorage: '../bower_components/backbone.localStorage/backbone.localStorage',
+		tpl: 'lib/tpl'
+	},
+
+	shim: {
+		'lib/backbone-localStorage': ['backbone'],
+
+		underscore: {
+			exports: '_'
+		},
+
+		backbone: {
+			exports: 'Backbone',
+			deps: ['jquery', 'underscore']
+		},
+
+		marionette: {
+			exports: 'Backbone.Marionette',
+			deps: ['backbone']
+		}
+	},
+
+	deps: ['jquery', 'underscore']
 });
 
-require(['app','backbone','routers/index','controllers/index'],function(app,Backbone,Router,Controller){
-  "use strict";
+require([
+	'app',
+	'backbone',
+	'routers/index',
+	'controllers/index'
+], function (app, Backbone, Router, Controller) {
+	'use strict';
+
+	app.start();
+
+	new Router({ controller: Controller });
 
-  app.start();
-  new Router({
-    controller : Controller
-  });
-  Backbone.history.start();
+	Backbone.history.start();
 });

labs/dependency-examples/backbone_marionette_require/js/models/Todo.js

+/*global define */
 
-define(['backbone','lib/backbone-localStorage'],function(Backbone){
-  'use strict';
+define([
+	'backbone',
+	'localStorage'
+], function (Backbone) {
+	'use strict';
 
-  return Backbone.Model.extend({
-    localStorage: new Backbone.LocalStorage('todos-backbone'),
-    defaults: {
-      title     : '',
-      completed : false,
-      created   : 0
-    },
-    initialize : function() {
-      if (this.isNew()) this.set('created', Date.now());
-    },
-    toggle  : function() {
-      return this.set('completed', !this.get('completed'));
-    }
-  });
+	return Backbone.Model.extend({
+		localStorage: new Backbone.LocalStorage('todos-backbone'),
 
+		defaults: {
+			title: '',
+			completed: false,
+			created: 0
+		},
+
+		initialize: function () {
+			if (this.isNew()) {
+				this.set('created', Date.now());
+			}
+		},
+
+		toggle: function () {
+			return this.set('completed', !this.get('completed'));
+		}
+	});
 });
 

labs/dependency-examples/backbone_marionette_require/js/routers/index.js

-define(['marionette'],function(marionette) {
-  'use strict';
+/*global define */
 
-  return marionette.AppRouter.extend({
-    appRoutes:{
-      '*filter': 'setFilter'
-    }
-  });
+define([
+	'marionette'
+], function (Marionette) {
+	'use strict';
 
+	return Marionette.AppRouter.extend({
+		appRoutes: {
+			'*filter': 'setFilter'
+		}
+	});
 });

labs/dependency-examples/backbone_marionette_require/js/templates.js

+/*global define */
 
-define(function(require){
-  "use strict";
-  return {
-    todoItemView        : require('tpl!templates/todoItemView.tmpl'),
-    todosCompositeView  : require('tpl!templates/todoListCompositeView.tmpl'),
-    footer              : require('tpl!templates/footer.tmpl'),
-    header              : require('tpl!templates/header.tmpl')
-  };
+define(function (require) {
+	'use strict';
+
+	return {
+		todoItemView: require('tpl!templates/todoItemView.tmpl'),
+		todosCompositeView: require('tpl!templates/todoListCompositeView.tmpl'),
+		footer: require('tpl!templates/footer.tmpl'),
+		header: require('tpl!templates/header.tmpl')
+	};
 });
 

labs/dependency-examples/backbone_marionette_require/js/templates/footer.tmpl

-<span id="todo-count"><strong></strong> items left</span>
+<span id="todo-count"><strong>0</strong> items left</span>
 <ul id="filters">
-  <li>
-    <a href="#/">All</a>
-  </li>
-  <li>
-    <a href="#/active">Active</a>
-  </li>
-  <li>
-    <a href="#/completed">Completed</a>
-  </li>
+	<li>
+		<a href="#/">All</a>
+	</li>
+	<li>
+		<a href="#/active">Active</a>
+	</li>
+	<li>
+		<a href="#/completed">Completed</a>
+	</li>
 </ul>
-<button id="clear-completed">Clear completed</button>
+<button id="clear-completed"></button>

labs/dependency-examples/backbone_marionette_require/js/templates/todoItemView.tmpl

 <div class="view">
-  <input class="toggle" type="checkbox" <% if (completed) { %>checked<% } %>>
-    <label><%= title %></label>
-  <button class="destroy"></button>
+	<input class="toggle" type="checkbox"<% if (completed) { %> checked<% } %>>
+		<label><%= title %></label>
+	<button class="destroy"></button>
 </div>
 <input class="edit" value="<%= title %>">

labs/dependency-examples/backbone_marionette_require/js/vent.js

-define(['marionette'],function(marionette){
-  "use strict";
-  return new marionette.EventAggregator();
-});

labs/dependency-examples/backbone_marionette_require/js/views/ActiveCount.js

-/*global define*/
+/*global define */
 
-define(['marionette'], function (Marionette) {
-  "use strict";
+define([
+	'marionette',
+	'jquery'
+], function (Marionette, $) {
+	'use strict';
 
-  return Marionette.View.extend({
-    tagName : 'span',
-    initialize : function() {
-      this.bindTo(this.collection, 'all', this.render, this);
-    },
-    render : function() {
-      this.$el.html(this.collection.getActive().length);
-    }
-  });
+	return Marionette.View.extend({
+		initialize: function () {
+			this.listenTo(this.collection, 'all', this.render, this);
+		},
 
+		render: function () {
+			this.$el = $('#todo-count');
+
+			var itemsLeft = this.collection.getActive().length;
+			var itemsWord = itemsLeft < 1 || itemsLeft > 1 ? 'items' : 'item';
+
+			this.$el.html('<strong>' + itemsLeft + '</strong> ' + itemsWord + ' left');
+		}
+	});
 });

labs/dependency-examples/backbone_marionette_require/js/views/CompletedCount.js

+/*global define */
+
+define([
+	'marionette',
+	'jquery'
+], function (Marionette, $) {
+	'use strict';
+
+	return Marionette.View.extend({
+		initialize: function () {
+			this.listenTo(this.collection, 'all', this.render, this);
+		},
+
+		render: function () {
+			this.$el = $('#clear-completed');
+
+			var completedTodos = this.collection.getCompleted();
+
+			this.$el
+				.toggle(completedTodos.length > 0)
+				.html('Clear completed (' + completedTodos.length + ')');
+		}
+	});
+});

labs/dependency-examples/backbone_marionette_require/js/views/Footer.js

-/*global define, $*/
-
-define(['marionette','vent','templates','views/ActiveCount'], function (Marionette,vent,templates,ActiveCount) {
-  "use strict";
-
-  return Marionette.Layout.extend({
-    template : templates.footer,
-    regions : {
-      count : '#todo-count strong'
-    },
-    ui : {
-      filters : '#filters a'
-    },
-    events : {
-      'click #clear-completed' : 'onClearClick'
-    },
-    initialize : function() {
-      this.bindTo(vent, 'todoList:filter', this.updateFilterSelection, this);
-    },
-    onRender : function() {
-      this.count.show(new ActiveCount({collection : this.collection}));
-    },
-    updateFilterSelection : function(filter) {
-      this.ui.filters.removeClass('selected').filter('[href="#/' + filter + '"]').addClass('selected');
-    },
-    onClearClick : function() {
-      vent.trigger('todoList:clear:completed');
-    }
-  });
+/*global define */
 
+define([
+	'marionette',
+	'templates',
+	'views/ActiveCount',
+	'views/CompletedCount'
+], function (Marionette, templates, ActiveCount, CompletedCount) {
+	'use strict';
+
+	return Marionette.Layout.extend({
+		template: templates.footer,
+
+		regions: {
+			activeCount: '#todo-count',
+			completedCount: '#clear-completed'
+		},
+
+		ui: {
+			filters: '#filters a'
+		},
+
+		events: {
+			'click #clear-completed' : 'onClearClick'
+		},
+
+		onRender: function () {
+			this.activeCount.show(new ActiveCount({ collection: this.collection }));
+			this.completedCount.show(new CompletedCount({ collection: this.collection }));
+		},
+
+		updateFilterSelection: function (filter) {
+			this.ui.filters
+				.removeClass('selected')
+				.filter('[href="#/' + filter + '"]')
+				.addClass('selected');
+		},
+
+		onClearClick: function () {
+			window.app.vent.trigger('todoList:clear:completed');
+		}
+	});
 });

labs/dependency-examples/backbone_marionette_require/js/views/Header.js

-/*global define*/
+/*global define */
 
-define(['marionette','templates'], function (Marionette,templates) {
-  "use strict";
+define([
+	'marionette',
+	'templates'
+], function (Marionette, templates) {
+	'use strict';
 
-  return Marionette.ItemView.extend({
-    template : templates.header,
-    ui : {
-      input : '#new-todo'
-    },
-    events : {
-      'keypress #new-todo':		'onInputKeypress'
-    },
-    onInputKeypress : function(evt) {
-      var ENTER_KEY = 13;
-      var todoText = this.ui.input.val().trim();
+	return Marionette.ItemView.extend({
+		template: templates.header,
 
-      if ( evt.which === ENTER_KEY && todoText ) {
-        this.collection.create({
-          title : todoText
-        });
-        this.ui.input.val('');
-      }
-    }
-  });
+		ui: {
+			input: '#new-todo'
+		},
 
+		events: {
+			'keypress #new-todo': 'onInputKeypress'
+		},
+
+		onInputKeypress: function (event) {
+			var ENTER_KEY = 13;
+			var todoText = this.ui.input.val().trim();
+
+			if (event.which === ENTER_KEY && todoText) {
+				this.collection.create({
+					title: todoText
+				});
+
+				this.ui.input.val('');
+			}
+		}
+	});
 });

labs/dependency-examples/backbone_marionette_require/js/views/TodoItemView.js

-/*global define*/
-
-define(['marionette','templates'], function (Marionette,templates) {
-  "use strict";
-
-  return Marionette.CompositeView.extend({
-    tagName : 'li',
-    template : templates.todoItemView,
-
-    ui : {
-      edit : '.edit'
-    },
-
-    events : {
-      'click .destroy' : 'destroy',
-      'dblclick label' : 'onEditClick',
-      'keypress .edit' : 'onEditKeypress',
-      'click .toggle'  : 'toggle'
-    },
-
-    initialize : function() {
-      this.bindTo(this.model, 'change', this.render, this);
-    },
-
-    onRender : function() {
-      this.$el.removeClass('active completed');
-      if (this.model.get('completed')) this.$el.addClass('completed');
-      else this.$el.addClass('active');
-    },
-
-    destroy : function() {
-      this.model.destroy();
-    },
-
-    toggle  : function() {
-      this.model.toggle().save();
-    },
-
-    onEditClick : function() {
-      this.$el.addClass('editing');
-      this.ui.edit.focus();
-    },
-
-    onEditKeypress : function(evt) {
-      var ENTER_KEY = 13;
-      var todoText = this.ui.edit.val().trim();
-
-      if ( evt.which === ENTER_KEY && todoText ) {
-        this.model.set('title', todoText).save();
-        this.$el.removeClass('editing');
-      }
-    }
-  });
+/*global define */
+
+define([
+	'marionette',
+	'templates'
+], function (Marionette, templates) {
+	'use strict';
+
+	var ENTER_KEY = 13;
+	var ESCAPE_KEY = 27;
+
+	return Marionette.CompositeView.extend({
+		tagName: 'li',
+
+		template: templates.todoItemView,
+
+		value: '',
+
+		ui: {
+			edit: '.edit'
+		},
+
+		events: {
+			'click .toggle': 'toggle',
+			'click .destroy': 'destroy',
+			'dblclick label': 'onEditDblclick',
+			'keypress .edit': 'onEditKeypress',
+			'blur .edit': 'onEditBlur'
+		},
+
+		initialize: function () {
+			this.value = this.model.get('title');
+
+			this.listenTo(this.model, 'change', this.render, this);
+		},
+
+		onRender: function () {
+			this.$el
+				.removeClass('active completed')
+				.addClass(this.model.get('completed') ? 'completed' : 'active');
+		},
+
+		destroy: function () {
+			this.model.destroy();
+		},
+
+		toggle: function () {
+			this.model.toggle().save();
+		},
+
+		toggleEditingMode: function () {
+			this.$el.toggleClass('editing');
+		},
+
+		onEditDblclick: function () {
+			this.toggleEditingMode();
+
+			this.ui.edit.focus().val(this.value);
+		},
+
+		onEditKeypress: function (event) {
+			if (event.which === ENTER_KEY) {
+				this.ui.edit.trigger('blur');
+			}
+
+			if (event.which === ESCAPE_KEY) {
+				this.toggleEditingMode();
+			}
+		},
+
+		onEditBlur: function (event) {
+			this.value = event.target.value.trim();
+
+			if (this.value) {
+				this.model.set('title', this.value).save();
+			} else {
+				this.destroy();
+			}
+
+			this.toggleEditingMode();
+		}
+	});
 });

labs/dependency-examples/backbone_marionette_require/js/views/TodoListCompositeView.js

-/*global define*/
-
-define(['marionette','templates','vent','views/TodoItemView'], function (Marionette,templates,vent,ItemView) {
-  "use strict";
-
-  return Marionette.CompositeView.extend({
-    template : templates.todosCompositeView,
-    itemView : ItemView,
-    itemViewContainer : '#todo-list',
-
-    ui : {
-      toggle : '#toggle-all'
-    },
-
-    events : {
-      'click #toggle-all' : 'onToggleAllClick'
-    },
-
-    initialize : function() {
-      this.bindTo(this.collection, 'all', this.updateToggleCheckbox, this);
-    },
-
-    onRender : function() {
-      this.updateToggleCheckbox();
-    },
-
-    updateToggleCheckbox : function() {
-      function reduceCompleted(left, right) { return left && right.get('completed'); }
-      var allCompleted = this.collection.reduce(reduceCompleted,true);
-      this.ui.toggle.prop('checked', allCompleted);
-    },
-
-    onToggleAllClick : function(evt) {
-      var isChecked = evt.currentTarget.checked;
-      this.collection.each(function(todo){
-        todo.save({'completed': isChecked});
-      });
-    }
-  });
-});
+/*global define */
+
+define([
+	'marionette',
+	'templates',
+	'views/TodoItemView'
+], function (Marionette, templates, ItemView) {
+	'use strict';
+
+	return Marionette.CompositeView.extend({
+		template: templates.todosCompositeView,
+
+		itemView: ItemView,
+
+		itemViewContainer: '#todo-list',
+
+		ui: {
+			toggle: '#toggle-all'
+		},
+
+		events: {
+			'click #toggle-all': 'onToggleAllClick'
+		},
 
+		initialize: function () {
+			this.listenTo(this.collection, 'all', this.updateToggleCheckbox, this);
+		},
+
+		onRender: function () {
+			this.updateToggleCheckbox();
+		},
+
+		updateToggleCheckbox: function () {
+			var allCompleted = this.collection.reduce(function (lastModel, thisModel) {
+				return lastModel && thisModel.get('completed');
+			}, true);
+
+			this.ui.toggle.prop('checked', allCompleted);
+		},
+
+		onToggleAllClick: function (event) {
+			var isChecked = event.currentTarget.checked;
+
+			this.collection.each(function (todo) {
+				todo.save({ completed: isChecked });
+			});
+		}
+	});
+});