marionette-amd-rails 0.8.4.1 → 0.10.2.1

data/README.md

@@ -3,7 +3,7 @@ marionette-amd-rails
 
 [![Dependency Status](https://gemnasium.com/eploko/marionette-amd-rails.png)](https://gemnasium.com/eploko/marionette-amd-rails)
 
-This gem is a wrapper for the AMD version of Derick Bailey's [Backbone.Marionette](https://github.com/derickbailey/backbone.marionette) library. It vendors the javascript library code for use with Rails' asset pipeline (Rails 3.1+).
+This gem is a wrapper for the AMD version of Derick Bailey's [Backbone.Marionette](https://github.com/marionettejs/backbone.marionette) library. It vendors the javascript library code for use with Rails' asset pipeline (Rails 3.1+).
 
 ## Dependencies
 
@@ -15,7 +15,7 @@ Add it to your Gemfile:
 
     group :assets do
       # Your other asset gems (sass-rails, coffee-rails, etc)
-      
+
       gem 'marionette-amd-rails'
     end
 
@@ -23,20 +23,20 @@ Load `backbone.marionette` module as a dependency when appropriate.
 
 ## Versioning
 
-The gem will mirror the [Backbone.Marionette](https://github.com/derickbailey/backbone.marionette) versioning scheme. That is, version 0.8.2.* of `marionette-amd-rails` would vendor [Backbone.Marionette](https://github.com/derickbailey/backbone.marionette) v0.8.2.
+The gem will mirror the [Backbone.Marionette](https://github.com/marionettejs/backbone.marionette) versioning scheme. That is, version 0.8.2.* of `marionette-amd-rails` would vendor [Backbone.Marionette](https://github.com/marionettejs/backbone.marionette) v0.8.2.
 
 ## Contributing
 
-For bugs in [Backbone.Marionette](https://github.com/derickbailey/backbone.marionette) itself, head over to their [issue tracker](https://github.com/derickbailey/backbone.marionette/issues). If you have a question, post it at [StackOverflow under the `backbone.marionette` tag](http://stackoverflow.com/questions/tagged/backbone.marionette).
+For bugs in [Backbone.Marionette](https://github.com/marionettejs/backbone.marionette) itself, head over to their [issue tracker](https://github.com/derickbailey/backbone.marionette/issues). If you have a question, post it at [StackOverflow under the `backbone.marionette` tag](http://stackoverflow.com/questions/tagged/backbone.marionette).
 
 For bugs in this gem distribution, use the [GitHub issue tracker](https://github.com/eploko/marionette-amd-rails/issues). If you could submit a pull request - that's even better!
 
 ## Donations
 
-If you're using Marionette and you're finding that it is saving you time and effort, then please consider donating to the upstream [Backbone.Marionette](https://github.com/derickbailey/backbone.marionette) project.
+If you're using Marionette and you're finding that it is saving you time and effort, then please consider donating to the upstream [Backbone.Marionette](https://github.com/marionettejs/backbone.marionette) project.
 
 [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=7SJHYWJ487SF4)
 
 ## License
 
-This library is distributed under the MIT license. Please see the LICENSE file.
+This library is distributed under the MIT license. Please see the LICENSE file.

data/vendor/assets/javascripts/backbone.marionette.js

@@ -1,9 +1,6 @@
-// Backbone.Marionette v0.8.4
-//
-// Copyright (C)2012 Derick Bailey, Muted Solutions, LLC
-// Distributed Under MIT License
-//
-// Documentation and Full License Available at:
+// Backbone.Marionette, v0.10.2
+// Copyright (c)2012 Derick Bailey, Muted Solutions, LLC.
+// Distributed under MIT license
 // http://github.com/derickbailey/backbone.marionette
 (function (root, factory) {
   if (typeof exports === 'object') {
@@ -18,25 +15,91 @@
 
     define(['jquery', 'underscore', 'backbone'], factory);
 
-  } 
+  }
 }(this, function ($, _, Backbone) {
 
   Backbone.Marionette = (function(Backbone, _, $){
-  var Marionette = {};
+    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);
+      });
+    }
+  });
 
-  Marionette.version = "0.8.4";
+  // 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({
-    // Get the template or template id/selector for this view
+
+    constructor: function(){
+      var eventBinder = new Marionette.EventBinder();
+      _.extend(this, eventBinder);
+
+      Backbone.View.prototype.constructor.apply(this, arguments);
+
+      this.bindBackboneEntityTo(this.model, this.modelEvents);
+      this.bindBackboneEntityTo(this.collection, this.collectionEvents);
+
+      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. The `template` can also be
-    // a function that returns a selector string.
-    getTemplateSelector: function(){
+    // to the constructor options.
+    getTemplate: function(){
       var template;
 
       // Get the template from `this.options.template` or
@@ -47,25 +110,20 @@
         template = this.template;
       }
 
-      // check if it's a function and execute it, if it is
-      if (_.isFunction(template)){
-        template  = template.call(this);
-      }
-
       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 
+    // 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(); 
+      if (this.model) {
+        data = this.model.toJSON();
       }
       else if (this.collection) {
         data = { items: this.collection.toJSON() };
@@ -110,16 +168,18 @@
           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)}
+      if (_.isFunction(events)){ events = events.call(this); }
 
       var combinedEvents = {};
       var triggers = this.configureTriggers();
@@ -128,6 +188,9 @@
       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
@@ -135,83 +198,87 @@
     close: function(){
       if (this.beforeClose) { this.beforeClose(); }
 
-      this.unbindAll();
       this.remove();
 
       if (this.onClose) { this.onClose(); }
       this.trigger('close');
+      this.unbindAll();
       this.unbind();
-    }
-  });
-
-  // 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(){
-      var args = slice.call(arguments);
-      Marionette.View.prototype.constructor.apply(this, args);
-
-      _.bindAll(this, "render");
-
-      this.initialEvents();
     },
 
-    // Configured the initial events that the item 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, "reset", this.render, this);
-      }
-    },
+    // 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; }
 
-    // Render the view, defaulting to underscore.js templates.
-    // You can override this in your view definition.
-    render: function(){
       var that = this;
 
-      var deferredRender = $.Deferred();
+      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;
+      }
 
-      var beforeRenderDone = function() {
-        that.trigger("before:render", that);
-        that.trigger("item:before:render", that);
+      // 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);
+      });
+    },
 
-        var deferredData = that.serializeData();
-        $.when(deferredData).then(dataSerialized);
-      } 
+    // This method is used to bind a backbone "entity" (collection/model) to methods on the view.
+    bindBackboneEntityTo: function(entity, bindings){
+      if (!entity || !bindings) { return; }
 
-      var dataSerialized = function(data){
-        var asyncRender = that.renderHtml(data);
-        $.when(asyncRender).then(templateRendered);
-      }
+      var view = this;
+      _.each(bindings, function(methodName, evt){
 
-      var templateRendered = function(html){
-        that.$el.html(html);
-        callDeferredMethod(that.onRender, onRenderDone, that);
-      }
+        var method = view[methodName];
+        if(!method) {
+          throw new Error("View method '"+ methodName +"' was configured as an event handler, but does not exist.");
+        }
 
-      var onRenderDone = function(){
-        that.trigger("render", that);
-        that.trigger("item:rendered", that);
+        view.bindTo(entity, evt, method, view);
+      });
+    }
+  });
 
-        deferredRender.resolve();
-      }
+  // Item View
+  // ---------
 
-      callDeferredMethod(this.beforeRender, beforeRenderDone, this);
+  // 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);
 
-      return deferredRender.promise();
+      if (this.initialEvents){
+        this.initialEvents();
+      }
     },
 
-    // Render the data for this item view in to some HTML.
-    // Override this method to replace the specific way in
-    // which an item view has it's data rendered in to html.
-    renderHtml: function(data) {
-      var template = this.getTemplateSelector();
-      return Marionette.Renderer.render(template, 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(){
+      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
@@ -231,12 +298,12 @@
   Marionette.CollectionView = Marionette.View.extend({
     constructor: function(){
       Marionette.View.prototype.constructor.apply(this, arguments);
-
-      _.bindAll(this, "addItemView", "render");
+      this.initChildViewStorage();
       this.initialEvents();
+      this.onShowCallbacks = new Marionette.Callbacks();
     },
 
-    // Configured the initial events that the collection view 
+    // 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(){
@@ -248,47 +315,89 @@
     },
 
     // Handle a child item added to the collection
-    addChildView: function(item){
-      var ItemView = this.getItemView();
-      return this.addItemView(item, ItemView);
+    addChildView: function(item, collection, options){
+      this.closeEmptyView();
+      var ItemView = this.getItemView(item);
+      return this.addItemView(item, ItemView, options.index);
     },
 
-    // Loop through all of the items and render 
-    // each of them with the specified `itemView`.
-    render: function(){
-      var that = this;
-      var deferredRender = $.Deferred();
-      var promises = [];
-      var ItemView = this.getItemView();
+    // 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.each(function(item){
-          var promise = that.addItemView(item, ItemView);
-          promises.push(promise);
-        });
+      if (this.collection && this.collection.length > 0) {
+        this.showCollection();
+      } else {
+        this.showEmptyView();
       }
 
-      deferredRender.done(function(){
-        if (this.onRender) { this.onRender(); }
-        this.trigger("collection:rendered", this);
-      });
+      this.triggerRendered();
+      return this;
+    },
 
-      $.when.apply(this, promises).then(function(){
-        deferredRender.resolveWith(that);
+    // Internal method to loop through each item in the
+    // collection view and show it
+    showCollection: function(){
+      var that = this;
+      var ItemView;
+      this.collection.each(function(item, index){
+        ItemView = that.getItemView(item);
+        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);
+      }
+    },
 
-      return deferredRender.promise();
+    // 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(){
+    getItemView: function(item){
       var itemView = this.options.itemView || this.itemView;
 
       if (!itemView){
@@ -302,15 +411,28 @@
 
     // Render the child item's view and add it to the
     // HTML for the collection view.
-    addItemView: function(item, ItemView){
+    addItemView: function(item, ItemView, index){
       var that = this;
 
       var view = this.buildItemView(item, ItemView);
-      this.bindTo(view, "all", function(){
 
-        // get the args, prepend the event name
-        // with "itemview:" and insert the child view
-        // as the first event arg (after the event name)
+      // 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);
@@ -318,22 +440,32 @@
         that.trigger.apply(that, args);
       });
 
-      this.storeChild(view);
-      this.trigger("item:added", view);
+      // 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;
 
-      var viewRendered = view.render();
-      $.when(viewRendered).then(function(){
-        that.appendHtml(that, view);
-      });
-      
-      return viewRendered;
+      return renderResult;
     },
 
-    // Build an `itemView` for every model in the collection. 
+    // 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 view = new ItemView({
-        model: item
-      });
+      var itemViewOptions;
+
+      if (_.isFunction(this.itemViewOptions)){
+        itemViewOptions = this.itemViewOptions(item);
+      } else {
+        itemViewOptions = this.itemViewOptions;
+      }
+
+      var options = _.extend({model: item}, itemViewOptions);
+      var view = new ItemView(options);
       return view;
     },
 
@@ -341,46 +473,63 @@
     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){
+    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){
-      if (!this.children){
-        this.children = {};
-      }
       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");
+      Marionette.View.prototype.close.apply(this, arguments);
     },
 
+    // Close the child views that this collection view
+    // is holding on to, if any
     closeChildren: function(){
+      var that = this;
       if (this.children){
-        _.each(this.children, function(childView){
-          childView.close();
+        _.each(_.clone(this.children), function(childView){
+          that.removeItemView(childView.model);
         });
       }
     }
   });
 
+
   // Composite View
   // --------------
 
@@ -393,12 +542,31 @@
       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;
+    getItemView: function(item){
+      var itemView = this.options.itemView || this.itemView || this.constructor;
+
+      if (!itemView){
+        var err = new Error("An `itemView` must be specified");
+        err.name = "NoItemViewError";
+        throw err;
+      }
+
+      return itemView;
     },
 
     // Renders the model once, and the collection once. Calling
@@ -406,34 +574,26 @@
     // but the collection will not re-render.
     render: function(){
       var that = this;
-      var compositeRendered = $.Deferred();
 
-      var modelIsRendered = this.renderModel();
-      $.when(modelIsRendered).then(function(html){
-        that.$el.html(html);
-        that.trigger("composite:model:rendered");
-        that.trigger("render");
+      this.resetItemViewContainer();
 
-        var collectionIsRendered = that.renderCollection();
-        $.when(collectionIsRendered).then(function(){
-          compositeRendered.resolve();
-        });
-      });
-
-      compositeRendered.done(function(){
-        that.trigger("composite:rendered");
-      });
+      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");
 
-      return compositeRendered.promise();
+      this.renderCollection();
+      this.trigger("composite:rendered");
+      return this;
     },
 
     // Render the collection for the composite view
     renderCollection: function(){
-      var collectionDeferred = Marionette.CollectionView.prototype.render.apply(this, arguments);
-      collectionDeferred.done(function(){
-        this.trigger("composite:collection:rendered");
-      });
-      return collectionDeferred.promise();
+      Marionette.CollectionView.prototype.render.apply(this, arguments);
+      this.trigger("composite:collection:rendered");
     },
 
     // Render an individual model, if we have one, as
@@ -443,12 +603,52 @@
       var data = {};
       data = this.serializeData();
 
-      var template = this.getTemplateSelector();
+      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 
+
+  // Region
   // ------
 
   // Manage the visual regions of your composite application. See
@@ -456,7 +656,8 @@
   Marionette.Region = function(options){
     this.options = options || {};
 
-    _.extend(this, options);
+    var eventBinder = new Marionette.EventBinder();
+    _.extend(this, eventBinder, options);
 
     if (!this.el){
       var err = new Error("An 'el' must be specified");
@@ -476,11 +677,19 @@
     // 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, appendMethod){
-      this.ensureEl();
+    show: function(view){
 
+      this.ensureEl();
       this.close();
-      this.open(view, appendMethod);
+
+      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;
     },
@@ -494,22 +703,13 @@
     // 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);
+      return $(selector);
     },
 
-    // Internal method to render and display a view. Not meant 
-    // to be called from any external code.
-    open: function(view, appendMethod){
-      var that = this;
-      appendMethod = appendMethod || "html";
-
-      $.when(view.render()).then(function () {
-        that.$el[appendMethod](view.el);
-        if (view.onShow) { view.onShow(); }
-        if (that.onShow) { that.onShow(view); }
-        view.trigger("show");
-        that.trigger("view:show", view);
-      });
+    // 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
@@ -524,20 +724,30 @@
       delete this.currentView;
     },
 
-    // Attach an existing view to the region. This 
-    // will not call `render` or `onShow` for the new view, 
+    // 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
   // ------
 
-  // Formerly known as Composite Region.
-  //
   // Used for managing application layouts, nested layouts and
   // multiple regions within an application or sub-application.
   //
@@ -545,19 +755,37 @@
   // 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 avialable when the `initialize` method
+    // is called.
     constructor: function () {
-      this.vent = new Backbone.Marionette.EventAggregator();
+      this.initializeRegions();
       Backbone.Marionette.ItemView.apply(this, arguments);
-      this.regionManagers = {};
     },
 
-    render: function () {
-      this.initializeRegions();
-      return Backbone.Marionette.ItemView.prototype.render.call(this, arguments);
+    // 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 is not the first render call, then we need to
+      // re-initializing the `el` for each region
+      if (!this._firstRender){
+        this.closeRegions();
+        this.reInitializeRegions();
+      } else {
+        this._firstRender = false;
+      }
+
+      var result = Marionette.ItemView.prototype.render.apply(this, arguments);
+      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);
     },
 
@@ -568,18 +796,57 @@
     // 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 (selector, name) {
-        var regionManager = new Backbone.Marionette.Region({
-            el: selector,
+      _.each(this.regions, function (region, name) {
+        var regionIsString = (typeof region === "string");
+        var regionSelectorIsString = (typeof region.selector === "string");
+        var regionTypeIsUndefined = (typeof region.regionType === "undefined");
+
+        if (!regionIsString && !regionSelectorIsString) {
+          throw new Error("Region must be specified as a selector string or an object with selector property");
+        }
+
+        var selector, RegionType;
+
+        if (regionIsString) {
+          selector = region;
+        } else {
+          selector = region.selector;
+        }
+
+        if (regionTypeIsUndefined){
+          RegionType = that.regionType;
+        } else {
+          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
@@ -589,12 +856,102 @@
       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
   // ---------
 
@@ -605,14 +962,14 @@
   //
   // Configure an AppRouter with `appRoutes`.
   //
-  // App routers can only take one `controller` object. 
+  // 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){
@@ -627,6 +984,9 @@
       }
     },
 
+    // 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;
@@ -657,206 +1017,304 @@
       }
     }
   });
-  
-  // Composite 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();
-    _.extend(this, options);
+
+  // 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(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);
+  // 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);
     },
 
-    // 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
+    // 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){
-      this.trigger("initialize:before", options);
-      this.initCallbacks.run(this, options);
-      this.trigger("initialize:after", options);
+      // Prevent re-start the module
+      if (this._isInitialized){ return; }
 
-      this.trigger("start", options);
+      // start the sub-modules (depth-first hierarchy)
+      _.each(this.submodules, function(mod){
+        if (mod.config.options.startWithParent){
+          mod.start(options);
+        }
+      });
+
+      // run the callbacks to "start" the current module
+      this._initializerCallbacks.run(options, this);
+      this._isInitialized = true;
     },
 
-    // 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;
+    // 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;
 
-      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();
-          }
+      // stop the sub-modules; depth-first, to make sure the
+      // sub-modules are stopped / finalized before parents
+      _.each(this.submodules, function(mod){ mod.stop(); });
 
-          this[region] = regionObj;
-        }
-      }
+      // run the finalizers
+      this._finalizerCallbacks.run();
+
+      // reset the initializers and finalizers
+      this._initializerCallbacks.reset();
+      this._finalizerCallbacks.reset();
+    },
+
+    // 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._runModuleDefinition(moduleDefinition);
+    },
+
+    // Internal method: run the module definition function with the correct
+    // arguments
+    _runModuleDefinition: function(definition){
+      if (!definition){ return; }
+
+      // build the correct list of arguments for the module definition
+      var args = _.flatten([
+        this,
+        this.config.app,
+        Backbone,
+        Marionette,
+        $, _,
+        this.config.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();
     }
   });
 
-  // BindTo: Event Binding
-  // ---------------------
-  
-  // BindTo facilitates the binding and unbinding of events
-  // from objects that extend `Backbone.Events`. It makes
-  // unbinding events, even with anonymous callback functions,
-  // easy. 
-  //
-  // Thanks to Johnny Oshika for this code.
-  // http://stackoverflow.com/questions/7567404/backbone-js-repopulate-or-recreate-the-view/7607853#7607853
-  Marionette.BindTo = {
-    // 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);
+  // Function level methods to create modules
+  _.extend(Marionette.Module, {
 
-      if (!this.bindings) { this.bindings = []; }
+    // 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(".");
 
-      var binding = { 
-        obj: obj, 
-        eventName: eventName, 
-        callback: callback, 
-        context: context 
-      }
+      // 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);
 
-      this.bindings.push(binding);
+      // Loop through all the parts of the module definition
+      var length = moduleNames.length;
+      _.each(moduleNames, function(moduleName, i){
+        var isLastModuleInChain = (i === length-1);
 
-      return binding;
-    },
+        var module = that._getModuleDefinition(parentModule, moduleName, app, customArgs);
+        module.config.options = that._getModuleOptions(parentModule, moduleDefinition);
 
-    // 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);
-      this.bindings = _.reject(this.bindings, function(bind){return bind === binding});
-    },
+        // if it's the first module in the chain, configure it
+        // for auto-start, as specified by the options
+        if (isLastModuleInChain){
+          that._configureAutoStart(app, module);
+        }
 
-    // Unbind all of the events that we have stored.
-    unbindAll: function () {
-      var that = this;
+        // Only add a module definition and initializer when this is
+        // the last module in a "parent.child.grandchild" hierarchy of
+        // module names
+        if (isLastModuleInChain && module.config.options.hasDefinition){
+          module.addDefinition(module.config.options.definition);
+        }
 
-      // The `unbindFrom` call removes elements from the array
-      // while it is being iterated, so clone it first.
-      var bindings = _.map(this.bindings, _.identity);
-      _.each(bindings, function (binding, index) {
-        that.unbindFrom(binding);
+        // Reset the parent module so that the next child
+        // in the list will be added to the correct parent
+        parentModule = module;
       });
-    }
-  };
 
-  // Callbacks
-  // ---------
+      // Return the last module in the definition chain
+      return parentModule;
+    },
 
-  // 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();
-  };
+    _configureAutoStart: function(app, module){
+      // Only add the initializer if it's the first module, and
+      // if it is set to auto-start, and if it has not yet been added
+      if (module.config.options.startWithParent && !module.config.autoStartConfigured){
+        // start the module when the app starts
+        app.addInitializer(function(options){
+          module.start(options);
+        });
+      }
 
-  _.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){
-      this.promise.done(function(context, options){
-        callback.call(context, options);
-      });
+      // prevent this module from being configured for
+      // auto start again. the first time the module
+      // is defined, determines it's auto-start
+      module.config.autoStartConfigured = true;
     },
 
-    // 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(context, options){
-      this.deferred.resolve(context, options);
-    }
-  });
+    _getModuleDefinition: function(parentModule, moduleName, app, customArgs){
+      // Get an existing module of this name if we have one
+      var module = parentModule[moduleName];
 
-  // Event Aggregator
-  // ----------------
+      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;
+      }
 
-  // A pub-sub object that can be used to decouple various parts
-  // of an application through event-driven architecture.
-  Marionette.EventAggregator = function(options){
-    _.extend(this, options);
-  };
+      return module;
+    },
 
-  _.extend(Marionette.EventAggregator.prototype, Backbone.Events, Marionette.BindTo, {
-    // Assumes the event aggregator itself is the 
-    // object being bound to.
-    bindTo: function(eventName, callback, context){
-      return Marionette.BindTo.bindTo.call(this, this, eventName, callback, context);
+    _getModuleOptions: function(parentModule, moduleDefinition){
+      // default to starting the module with the app
+      var options = {
+        startWithParent: true,
+        hasDefinition: !!moduleDefinition
+      };
+
+      // short circuit if we don't have a module definition
+      if (!options.hasDefinition){ 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
+        options.hasDefinition = !!moduleDefinition.define;
+        options.definition = moduleDefinition.define;
+
+        // grab the "startWithParent" attribute if one exists
+        if (moduleDefinition.hasOwnProperty("startWithParent")){
+          options.startWithParent = moduleDefinition.startWithParent;
+        }
+      }
+
+      return options;
     }
   });
 
   // Template Cache
   // --------------
-  
+
   // Manage templates stored in `<script>` blocks,
   // caching them for faster access.
-  Marionette.TemplateCache = {
-    templates: {},
-    loaders: {},
+  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 templateRetrieval = $.Deferred();
-      var cachedTemplate = this.templates[templateId];
+      var cachedTemplate = this.templateCaches[templateId];
 
-      if (cachedTemplate){
-        templateRetrieval.resolve(cachedTemplate);
-      } else {
-        var loader = this.loaders[templateId];
-        if(loader) {
-          templateRetrieval = loader;
-        } else {
-          this.loaders[templateId] = templateRetrieval;
+      if (!cachedTemplate){
+        cachedTemplate = new Marionette.TemplateCache(templateId);
+        this.templateCaches[templateId] = cachedTemplate;
+      }
+
+      return cachedTemplate.load();
+    },
 
-          this.loadTemplate(templateId, function(template){
-            delete that.loaders[templateId];
-            that.templates[templateId] = template;
-            templateRetrieval.resolve(template);
-          });
+    // 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;
       }
 
-      return templateRetrieval.promise();
+      // 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, callback){
+    loadTemplate: function(templateId){
       var template = $(templateId).html();
 
-      // Make sure we have a template before trying to compile it
       if (!template || template.length === 0){
         var msg = "Could not find template: '" + templateId + "'";
         var err = new Error(msg);
@@ -864,9 +1322,7 @@
         throw err;
       }
 
-      template = this.compileTemplate(template);
-
-      callback.call(this, template);
+      return template;
     },
 
     // Pre-compile the template before caching it. Override
@@ -875,159 +1331,112 @@
     // the template engine used (Handebars, etc).
     compileTemplate: function(rawTemplate){
       return _.template(rawTemplate);
-    },
-
-    // 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.templates[arguments[i]];
-        }
-      } else {
-        this.templates = {};
-      }
     }
-  };
+  });
+
 
   // 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
-    // actual template. Override this method to provide your own
+    // template function. Override this method to provide your own
     // custom rendering and template handling for all of Marionette.
     render: function(template, data){
-      var that = this;
-      var asyncRender = $.Deferred();
-
-      var templateRetrieval = Marionette.TemplateCache.get(template);
-
-      $.when(templateRetrieval).then(function(template){
-        var html = that.renderTemplate(template, data);
-        asyncRender.resolve(html);
-      });
-
-      return asyncRender.promise();
-    },
-
-    // Default implementation uses underscore.js templates. Override
-    // this method to use your own templating engine.
-    renderTemplate: function(template, data){
-      var html = 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._callbacks = [];
   };
 
-  // Modules
-  // -------
+  _.extend(Marionette.Callbacks.prototype, {
 
-  // The "Modules" object builds modules on an
-  // object that it is attached to. It should not be
-  // used on it's own, but should be attached to
-  // another object that will define modules.
-  Marionette.Modules = {
+    // 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});
 
-    // Add modules to the application, providing direct
-    // access to your applicaiton object, Backbone, 
-    // Marionette, jQuery and Underscore as parameters 
-    // to a callback function.
-    module: function(moduleNames, moduleDefinition){
-      var moduleName, module, moduleOverride;
-      var parentModule = this;
-      var parentApp = this;
-      var moduleNames = moduleNames.split(".");
+      this._deferred.done(function(context, options){
+        if (contextOverride){ context = contextOverride; }
+        callback.call(context, options);
+      });
+    },
 
-      // Loop through all the parts of the module definition
-      var length = moduleNames.length;
-      for(var i = 0; i < length; i++){
-        var isLastModuleInChain = (i === length-1);
+    // 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);
+    },
 
-        // Get the module name, and check if it exists on
-        // the current parent already
-        moduleName = moduleNames[i];
-        module = parentModule[moduleName];
+    // 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 that = this;
+      var callbacks = this._callbacks;
+      this._deferred = $.Deferred();
+      this._callbacks = [];
+      _.each(callbacks, function(cb){
+        that.add(cb.cb, cb.ctx);
+      });
+    }
+  });
 
-        // Create a new module if we don't have one already
-        if (!module){ 
-          module = new Marionette.Application();
-        }
 
-        // Check to see if we need to run the definition
-        // for the module. Only run the definition if one
-        // is supplied, and if we're at the last segment
-        // of the "Module.Name" chain.
-        if (isLastModuleInChain && moduleDefinition){
-          moduleOverride = moduleDefinition(module, parentApp, Backbone, Marionette, jQuery, _);
-          // If we have a module override, use it instead.
-          if (moduleOverride){
-            module = moduleOverride;
-          }
-        }
+  // Event Aggregator
+  // ----------------
 
-        // If the defined module is not what we are
-        // currently storing as the module, replace it
-        if (parentModule[moduleName] !== module){
-          parentModule[moduleName] = module;
-        }
+  // A pub-sub object that can be used to decouple various parts
+  // of an application through event-driven architecture.
+  Marionette.EventAggregator = Marionette.EventBinder.extend({
 
-        // Reset the parent module so that the next child
-        // in the list will be added to the correct parent
-        parentModule = module;
-      }
+    // Extend any provided options directly on to the event binder
+    constructor: function(options){
+      Marionette.EventBinder.apply(this, arguments);
+      _.extend(this, options);
+    },
 
-      // Return the last module in the definition chain
-      return module;
+    // 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;
-  
-  // Copy the `extend` function used by Backbone's classes
-  var extend = Marionette.View.extend;
-  Marionette.Region.extend = extend;
-  Marionette.Application.extend = extend;
-
-  // Copy the `modules` feature on to the `Application` object
-  Marionette.Application.prototype.module = Marionette.Modules.module;
-
-  // Copy the features of `BindTo` on to these objects
-  _.extend(Marionette.View.prototype, Marionette.BindTo);
-  _.extend(Marionette.Application.prototype, Marionette.BindTo);
-  _.extend(Marionette.Region.prototype, Marionette.BindTo);
-
-  // A simple wrapper method for deferring a callback until 
-  // after another method has been called, passing the
-  // results of the first method to the second. Uses jQuery's
-  // deferred / promise objects, and $.when/then to make it
-  // work.
-  var callDeferredMethod = function(fn, callback, context){
-    var promise;
-    if (fn) { promise = fn.call(context); }
-    $.when(promise).then(callback);
-  }
 
 
-  return Marionette;
-})(Backbone, _, window.jQuery || window.Zepto || window.ender);
+    return Marionette;
+  })(Backbone, _, window.jQuery || window.Zepto || window.ender);
 
-  return Backbone.Marionette; 
+  return Backbone.Marionette;
 
-}));
+}));