Skip to content

Instantly share code, notes, and snippets.

@ptbrowne
Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ptbrowne/d1b913a031dcfe6b9d46 to your computer and use it in GitHub Desktop.
Save ptbrowne/d1b913a031dcfe6b9d46 to your computer and use it in GitHub Desktop.
marionette 1.6.3
// MarionetteJS (Backbone.Marionette)
// ----------------------------------
// v1.6.3
//
// Copyright (c)2014 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.1.0
//
// Copyright (c)2014 Derick Bailey, Muted Solutions, LLC.
// Distributed under MIT license
//
// http://github.com/marionettejs/backbone.babysitter
// Backbone.ChildViewContainer
// ---------------------------
//
// Provide a container to store, retrieve and
// shut down child views.
Backbone.ChildViewContainer = (function(Backbone, _){
// Container Constructor
// ---------------------
var Container = function(views){
this._views = {};
this._indexByModel = {};
this._indexByCustom = {};
this._updateLength();
_.each(views, this.add, this);
};
// Container Methods
// -----------------
_.extend(Container.prototype, {
// Add a view to this container. Stores the view
// by `cid` and makes it searchable by the model
// cid (and model itself). 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 by custom
if (customIndex){
this._indexByCustom[customIndex] = viewCid;
}
this._updateLength();
return this;
},
// Find a view by the model that was attached to
// it. Uses the model's `cid` to find it.
findByModel: function(model){
return this.findByModelCid(model.cid);
},
// Find a view by the `cid` of the model that was attached to
// it. Uses the model's `cid` to find the view `cid` and
// retrieve the view using it.
findByModelCid: function(modelCid){
var viewCid = this._indexByModel[modelCid];
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 its `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 custom index
_.any(this._indexByCustom, function(cid, key) {
if (cid === viewCid) {
delete this._indexByCustom[key];
return true;
}
}, this);
// remove the view from the container
delete this._views[viewCid];
// update the length
this._updateLength();
return this;
},
// 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){
this.apply(method, _.tail(arguments));
},
// 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){
_.each(this._views, function(view){
if (_.isFunction(view[method])){
view[method].apply(view, args || []);
}
});
},
// Update the `.length` attribute on this container
_updateLength: function(){
this.length = _.size(this._views);
}
});
// 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)
// ----------------------------------
// v1.0.0
//
// Copyright (c)2014 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 slice = Array.prototype.slice;
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;
};
// Marionette.normalizeMethods
// ----------------------
// Pass in a mapping of events => functions or function names
// and return a mapping of events => functions
Marionette.normalizeMethods = function(hash) {
var normalizedHash = {}, method;
_.each(hash, function(fn, name) {
method = fn;
if (!_.isFunction(method)) {
method = this[method];
}
if (!method) {
return;
}
normalizedHash[name] = method;
}, this);
return normalizedHash;
};
// Trigger an event and/or 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 implementation
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, if a trigger method exists
if(_.isFunction(this.trigger)) {
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(documentElement){
// track when the view has been shown in the DOM,
// using a Marionette.Region (or by other means of triggering "show")
function handleShow(view){
view._isShown = true;
triggerDOMRefresh(view);
}
// track when the view has been rendered
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 && isInDOM(view)){
if (_.isFunction(view.triggerMethod)){
view.triggerMethod("dom:refresh");
}
}
}
function isInDOM(view) {
return documentElement.contains(view.el);
}
// Export public API
return function(view){
view.listenTo(view, "show", function(){
handleShow(view);
});
view.listenTo(view, "render", function(){
handleRender(view);
});
};
})(document.documentElement);
// 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);
});
}
// Bind the event to a supplied callback function
function bindToFunction(target, entity, evt, method){
target.listenTo(entity, evt, method);
}
// 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);
});
}
// Bind the event to a supplied callback function
function unbindToFunction(target, entity, evt, method){
target.stopListening(entity, evt, method);
}
// 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){
throwError("An 'el' must be specified for a region.", "NoElError");
}
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 = _.isString(regionConfig);
var regionSelectorIsString = _.isString(regionConfig.selector);
var regionTypeIsUndefined = _.isUndefined(regionConfig.regionType);
var regionIsType = _.isFunction(regionConfig);
if (!regionIsType && !regionIsString && !regionSelectorIsString) {
throwError("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;
delete regionConfig.selector;
}
// get the type for the region
if (regionIsType){
RegionType = regionConfig;
}
if (!regionIsType && regionTypeIsUndefined) {
RegionType = defaultRegionType;
}
if (regionConfig.regionType) {
RegionType = regionConfig.regionType;
delete regionConfig.regionType;
}
if (regionIsString || regionIsType) {
regionConfig = {};
}
regionConfig.el = selector;
// build the region instance
var region = new RegionType(regionConfig);
// 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", 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 = 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 (_.isString(definition)){
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();
Marionette.Controller.prototype.close.apply(this, arguments);
},
// 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.call(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) {
throwError("Cannot render the template since it's false, null or undefined.", "TemplateNotFoundError");
}
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(options){
_.bindAll(this, "render");
// this exposes view options to the view initializer
// this is a backfill since backbone removed the assignment
// of this.options
// at some point however this may be removed
this.options = _.extend({}, _.result(this, 'options'), _.isFunction(options) ? options.call(this) : options);
// parses out the @ui DSL for events
this.events = this.normalizeUIKeys(_.result(this, 'events'));
Backbone.View.prototype.constructor.apply(this, arguments);
Marionette.MonitorDOMRefresh(this);
this.listenTo(this, "show", this.onShowCalled);
},
// import the "triggerMethod" to trigger events with corresponding
// methods if the method exists
triggerMethod: Marionette.triggerMethod,
// Imports the "normalizeMethods" to transform hashes of
// events=>function references/names to a hash of events=>function references
normalizeMethods: Marionette.normalizeMethods,
// 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 = Marionette.getOption(this, "templateHelpers");
if (_.isFunction(templateHelpers)){
templateHelpers = templateHelpers.call(this);
}
return _.extend(target, templateHelpers);
},
// allows for the use of the @ui. syntax within
// a given key for triggers and events
// swaps the @ui with the associated selector
normalizeUIKeys: function(hash) {
var _this = this;
if (typeof(hash) === "undefined") {
return;
}
_.each(_.keys(hash), function(v) {
var pattern = /@ui.[a-zA-Z_$0-9]*/g;
if (v.match(pattern)) {
hash[v.replace(pattern, function(r) {
return _.result(_this, "ui")[r.slice(4)];
})] = hash[v];
delete hash[v];
}
});
return hash;
},
// 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 = this.normalizeUIKeys(_.result(this, "triggers"));
// Configure the triggers, prevent default
// action and stop propagation of DOM events
_.each(triggers, function(value, key){
var hasOptions = _.isObject(value);
var eventName = hasOptions ? value.event : value;
// build the event handler function for the DOM event
triggerEvents[key] = function(e){
// stop the event in its tracks
if (e) {
var prevent = e.preventDefault;
var stop = e.stopPropagation;
var shouldPrevent = hasOptions ? value.preventDefault : prevent;
var shouldStop = hasOptions ? value.stopPropagation : stop;
if (shouldPrevent && prevent) { prevent.apply(e); }
if (shouldStop && stop) { stop.apply(e); }
}
// build the args for the event
var args = {
view: this,
model: this.model,
collection: this.collection
};
// trigger the event
this.triggerMethod(eventName, 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 || !this._uiBindings){ 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({
// Setting up the inheritance chain which allows changes to
// Marionette.View.prototype.constructor which allows overriding
constructor: function(){
Marionette.View.prototype.constructor.apply(this, arguments);
},
// 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, 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, arguments);
this._initialEvents();
this.initRenderBuffer();
},
// Instead of inserting elements one by one into the page,
// it's much more performant to insert elements into a document
// fragment and then insert that document fragment into the page
initRenderBuffer: function() {
this.elBuffer = document.createDocumentFragment();
this._bufferedChildren = [];
},
startBuffering: function() {
this.initRenderBuffer();
this.isBuffering = true;
},
endBuffering: function() {
this.isBuffering = false;
this.appendBuffer(this, this.elBuffer);
this._triggerShowBufferedChildren();
this.initRenderBuffer();
},
_triggerShowBufferedChildren: function () {
if (this._isShown) {
_.each(this._bufferedChildren, function (child) {
Marionette.triggerMethod.call(child, "show");
});
this._bufferedChildren = [];
}
},
// Configured the initial events that the collection view
// binds to.
_initialEvents: function(){
if (this.collection){
this.listenTo(this.collection, "add", this.addChildView);
this.listenTo(this.collection, "remove", this.removeItemView);
this.listenTo(this.collection, "reset", this.render);
}
},
// 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.startBuffering();
this.closeEmptyView();
this.closeChildren();
if (!this.isEmpty(this.collection)) {
this.showCollection();
} else {
this.showEmptyView();
}
this.endBuffering();
},
// 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 = this.getEmptyView();
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 empty view type
getEmptyView: function(){
return Marionette.getOption(this, "emptyView");
},
// 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 && !this.isBuffering){
Marionette.triggerMethod.call(view, "show");
}
// this view was added
this.triggerMethod("after:item:added", view);
return 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.call(arguments);
var rootEvent = args[0];
var itemEvents = this.normalizeMethods(this.getItemEvents());
args[0] = prefix + ":" + rootEvent;
args.splice(1, 0, view);
// call collectionView itemEvent if defined
if (typeof itemEvents !== "undefined" && _.isFunction(itemEvents[rootEvent])) {
itemEvents[rootEvent].apply(this, args);
}
Marionette.triggerMethod.apply(this, args);
}, this);
},
// returns the value of itemEvents depending on if a function
getItemEvents: function() {
if (_.isFunction(this.itemEvents)) {
return this.itemEvents.call(this);
}
return this.itemEvents;
},
// 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 check if the collection is empty
isEmpty: function(collection){
// check if we're empty now
return !this.collection || this.collection.length === 0;
},
// If empty, show the empty view
checkEmpty: function (){
if (this.isEmpty(this.collection)){
this.showEmptyView();
}
},
// You might need to override this if you've overridden appendHtml
appendBuffer: function(collectionView, buffer) {
collectionView.$el.append(buffer);
},
// Append the HTML to the collection's `el`.
// Override this method to do something other
// than `.append`.
appendHtml: function(collectionView, itemView, index){
if (collectionView.isBuffering) {
// buffering happens on reset events and initial renders
// in order to reduce the number of inserts into the
// document, which are expensive.
collectionView.elBuffer.appendChild(itemView.el);
collectionView._bufferedChildren.push(itemView);
}
else {
// If we've already rendered the main collection, just
// append the new items directly into the element.
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, 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({
// Setting up the inheritance chain which allows changes to
// Marionette.CollectionView.prototype.constructor which allows overriding
constructor: function(){
Marionette.CollectionView.prototype.constructor.apply(this, arguments);
},
// 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(){
// Bind only after composite view is rendered to avoid adding child views
// to nonexistent itemViewContainer
this.once('render', function () {
if (this.collection){
this.listenTo(this.collection, "add", this.addChildView);
this.listenTo(this.collection, "remove", this.removeItemView);
this.listenTo(this.collection, "reset", this._renderChildren);
}
});
},
// 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){
this.triggerMethod("composite:collection:before:render");
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);
},
// You might need to override this if you've overridden appendHtml
appendBuffer: function(compositeView, buffer) {
var $container = this.getItemViewContainer(compositeView);
$container.append(buffer);
},
// 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(compositeView, itemView, index){
if (compositeView.isBuffering) {
compositeView.elBuffer.appendChild(itemView.el);
compositeView._bufferedChildren.push(itemView);
}
else {
// If we've already rendered the main collection, just
// append the new items directly into the element.
var $container = this.getItemViewContainer(compositeView);
$container.append(itemView.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;
var itemViewContainer = Marionette.getOption(containerView, "itemViewContainer");
if (itemViewContainer){
var selector = _.isFunction(itemViewContainer) ? itemViewContainer.call(this) : 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.prototype.constructor.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.isClosed){
// a previously closed layout means we need to
// completely re-initialize the regions
this._initializeRegions();
}
if (this._firstRender) {
// if this is the first render, don't do anything to
// reset the regions
this._firstRender = false;
} else if (!this.isClosed){
// If this is not the first render call, then we need to
// re-initializing the `el` for each region
this._reInitializeRegions();
}
return Marionette.ItemView.prototype.render.apply(this, arguments);
},
// Handle closing regions, and then close the view itself.
close: function () {
if (this.isClosed){ return; }
this.regionManager.close();
Marionette.ItemView.prototype.close.apply(this, arguments);
},
// Add a single region, by name, to the layout
addRegion: function(name, definition){
var regions = {};
regions[name] = definition;
return this._buildRegions(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){
delete this.regions[name];
return this.regionManager.removeRegion(name);
},
// internal method to build regions
_buildRegions: function(regions){
var that = this;
var defaults = {
regionType: Marionette.getOption(this, "regionType"),
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, arguments);
this.options = options || {};
var appRoutes = Marionette.getOption(this, "appRoutes");
var controller = this._getController();
this.processAppRoutes(controller, appRoutes);
},
// Similar to route method on a Backbone Router but
// method is called on the controller
appRoute: function(route, methodName) {
var controller = this._getController();
this._addAppRoute(controller, route, methodName);
},
// 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) {
if (!appRoutes){ return; }
var routeNames = _.keys(appRoutes).reverse(); // Backbone requires reverted order of routes
_.each(routeNames, function(route) {
this._addAppRoute(controller, route, appRoutes[route]);
}, this);
},
_getController: function(){
return Marionette.getOption(this, "controller");
},
_addAppRoute: function(controller, route, methodName){
var method = controller[methodName];
if (!method) {
throwError("Method '" + methodName + "' was not found on the controller");
}
this.route(route, methodName, _.bind(method, controller));
}
});
// 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(){
this.commands.execute.apply(this.commands, arguments);
},
// Request/response, facilitated by Backbone.Wreqr.RequestResponse
request: function(){
return this.reqres.request.apply(this.reqres, arguments);
},
// 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);
},
// Close all regions in the app, without removing them
closeRegions: function(){
this._regionManager.closeRegions();
},
// Removes a region from your app, by name
// Accepts the regions name
// removeRegion('myRegion')
removeRegion: function(region) {
this._regionManager.removeRegion(region);
},
// Provides alternative access to regions
// Accepts the region name
// getRegion('main')
getRegion: function(region) {
return this._regionManager.get(region);
},
// Create a module, attached to the application
module: function(moduleNames, moduleDefinition){
// Overwrite the module class if the user specifies one
var ModuleClass = Marionette.Module.getClass(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 ModuleClass.create.apply(ModuleClass, 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, options){
this.moduleName = moduleName;
this.options = _.extend({}, this.options, options);
this.initialize = options.initialize || this.initialize;
// store sub-modules
this.submodules = {};
this._setupInitializersAndFinalizers();
// store the configuration for this module
this.app = app;
this.startWithParent = true;
this.triggerMethod = Marionette.triggerMethod;
if (_.isFunction(this.initialize)){
this.initialize(this.options, moduleName, app);
}
};
Marionette.Module.extend = Marionette.extend;
// 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, {
// Initialize is an empty function by default. Override it with your own
// initialization logic when extending Marionette.Module.
initialize: function(){},
// 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.call(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, moduleDefinition);
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){
var options = _.extend({}, def);
var ModuleClass = this.getClass(def);
// 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 ModuleClass(moduleName, app, options);
parentModule[moduleName] = module;
// store the module on the parent
parentModule.submodules[moduleName] = module;
}
return module;
},
getClass: function(moduleDefinition) {
var ModuleClass = Marionette.Module;
if (!moduleDefinition) {
return ModuleClass;
}
if (moduleDefinition.prototype instanceof ModuleClass) {
return moduleDefinition;
}
return moduleDefinition.moduleClass || ModuleClass;
},
_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 = !_.isUndefined(def.startWithParent) ? def.startWithParent : true;
} 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, _);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment