backbone.marionette.js

Backbone.Marionette = (function(Backbone, _, $){
  var Marionette = {};

  Marionette.version = "0.8.2";

  Marionette.View = Backbone.View.extend({

    getTemplateSelector: function(){
      var template;

      if (this.options && this.options.template){
        template = this.options.template;
      } else {
        template = this.template;
      }

      if (_.isFunction(template)){
        template  = template.call(this);
      }

      return template;
    },

    serializeData: function(){
      var data;

      if (this.model) { 
        data = this.model.toJSON(); 
      }
      else if (this.collection) {
        data = { items: this.collection.toJSON() };
      }

      data = this.mixinTemplateHelpers(data);

      return data;
    },

    mixinTemplateHelpers: function(target){
      target = target || {};
      var templateHelpers = this.templateHelpers;
      if (_.isFunction(templateHelpers)){
        templateHelpers = templateHelpers.call(this);
      }
      return _.extend(target, templateHelpers);
    },

    configureTriggers: function(){
      if (!this.triggers) { return; }

      var triggers = this.triggers;
      var that = this;
      var triggerEvents = {};

      if (_.isFunction(triggers)){ triggers = triggers.call(this); }

      _.each(triggers, function(value, key){

        triggerEvents[key] = function(e){
          if (e && e.preventDefault){ e.preventDefault(); }
          if (e && e.stopPropagation){ e.stopPropagation(); }
          that.trigger(value);
        }

      });

      return triggerEvents;
    },

    delegateEvents: function(events){
      events = events || this.events;
      if (_.isFunction(events)){ events = events.call(this)}

      var combinedEvents = {};
      var triggers = this.configureTriggers();
      _.extend(combinedEvents, events, triggers);

      Backbone.View.prototype.delegateEvents.call(this, combinedEvents);
    },

    close: function(){
      if (this.beforeClose) { this.beforeClose(); }

      this.unbindAll();
      this.remove();

      if (this.onClose) { this.onClose(); }
      this.trigger('close');
      this.unbind();
    }
  });

  Marionette.ItemView = Marionette.View.extend({
    constructor: function(){
      var args = slice.call(arguments);
      Marionette.View.prototype.constructor.apply(this, args);

      _.bindAll(this, "render");

      this.initialEvents();
    },

    initialEvents: function(){
      if (this.collection){
        this.bindTo(this.collection, "reset", this.render, this);
      }
    },

    render: function(){
      var that = this;

      var deferredRender = $.Deferred();

      var beforeRenderDone = function() {
        that.trigger("before:render", that);
        that.trigger("item:before:render", that);

        var deferredData = that.serializeData();
        $.when(deferredData).then(dataSerialized);
      } 

      var dataSerialized = function(data){
        var asyncRender = that.renderHtml(data);
        $.when(asyncRender).then(templateRendered);
      }

      var templateRendered = function(html){
        that.$el.html(html);
        callDeferredMethod(that.onRender, onRenderDone, that);
      }

      var onRenderDone = function(){
        that.trigger("render", that);
        that.trigger("item:rendered", that);

        deferredRender.resolve();
      }

      callDeferredMethod(this.beforeRender, beforeRenderDone, this);

      return deferredRender.promise();
    },

    renderHtml: function(data) {
      var template = this.getTemplateSelector();
      return Marionette.Renderer.render(template, data);
    },

    close: function(){
      this.trigger('item:before:close');
      Marionette.View.prototype.close.apply(this, arguments);
      this.trigger('item:closed');
    }
  });

  Marionette.CollectionView = Marionette.View.extend({
    constructor: function(){
      Marionette.View.prototype.constructor.apply(this, arguments);

      _.bindAll(this, "addItemView", "render");
      this.initialEvents();
    },

    initialEvents: function(){
      if (this.collection){
        this.bindTo(this.collection, "add", this.addChildView, this);
        this.bindTo(this.collection, "remove", this.removeItemView, this);
        this.bindTo(this.collection, "reset", this.render, this);
      }
    },

    addChildView: function(item){
      var ItemView = this.getItemView();
      return this.addItemView(item, ItemView);
    },

    render: function(){
      var that = this;
      var deferredRender = $.Deferred();
      var promises = [];
      var ItemView = this.getItemView();

      if (this.beforeRender) { this.beforeRender(); }
      this.trigger("collection:before:render", this);

      this.closeChildren();

      if (this.collection) {
        this.collection.each(function(item){
          var promise = that.addItemView(item, ItemView);
          promises.push(promise);
        });
      }

      deferredRender.done(function(){
        if (this.onRender) { this.onRender(); }
        this.trigger("collection:rendered", this);
      });

      $.when.apply(this, promises).then(function(){
        deferredRender.resolveWith(that);
      });

      return deferredRender.promise();
    },

    getItemView: function(){
      var itemView = this.options.itemView || this.itemView;

      if (!itemView){
        var err = new Error("An `itemView` must be specified");
        err.name = "NoItemViewError";
        throw err;
      }

      return itemView;
    },

    addItemView: function(item, ItemView){
      var that = this;

      var view = this.buildItemView(item, ItemView);
      this.bindTo(view, "all", function(){

        var args = slice.call(arguments);
        args[0] = "itemview:" + args[0];
        args.splice(1, 0, view);

        that.trigger.apply(that, args);
      });

      this.storeChild(view);
      this.trigger("item:added", view);

      var viewRendered = view.render();
      $.when(viewRendered).then(function(){
        that.appendHtml(that, view);
      });
      
      return viewRendered;
    },

    buildItemView: function(item, ItemView){
      var view = new ItemView({
        model: item
      });
      return view;
    },

    removeItemView: function(item){
      var view = this.children[item.cid];
      if (view){
        view.close();
        delete this.children[item.cid];
      }
      this.trigger("item:removed", view);
    },

    appendHtml: function(collectionView, itemView){
      collectionView.$el.append(itemView.el);
    },

    storeChild: function(view){
      if (!this.children){
        this.children = {};
      }
      this.children[view.model.cid] = view;
    },
    

    close: function(){
      this.trigger("collection:before:close");
      this.closeChildren();
      Marionette.View.prototype.close.apply(this, arguments);
      this.trigger("collection:closed");
    },

    closeChildren: function(){
      if (this.children){
        _.each(this.children, function(childView){
          childView.close();
        });
      }
    }
  });

  Marionette.CompositeView = Marionette.CollectionView.extend({
    constructor: function(options){
      Marionette.CollectionView.apply(this, arguments);
      this.itemView = this.getItemView();
    },

    getItemView: function(){
      return this.itemView || this.constructor;
    },

    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");

        var collectionIsRendered = that.renderCollection();
        $.when(collectionIsRendered).then(function(){
          compositeRendered.resolve();
        });
      });

      compositeRendered.done(function(){
        that.trigger("composite:rendered");
      });

      return compositeRendered.promise();
    },

    renderCollection: function(){
      var collectionDeferred = Marionette.CollectionView.prototype.render.apply(this, arguments);
      collectionDeferred.done(function(){
        this.trigger("composite:collection:rendered");
      });
      return collectionDeferred.promise();
    },

    renderModel: function(){
      var data = {};
      data = this.serializeData();

      var template = this.getTemplateSelector();
      return Marionette.Renderer.render(template, data);
    }
  });

  Marionette.Region = function(options){
    this.options = options || {};

    _.extend(this, options);

    if (!this.el){
      var err = new Error("An 'el' must be specified");
      err.name = "NoElError";
      throw err;
    }

    if (this.initialize){
      this.initialize.apply(this, arguments);
    }
  };

  _.extend(Marionette.Region.prototype, Backbone.Events, {

    show: function(view, appendMethod){
      this.ensureEl();

      this.close();
      this.open(view, appendMethod);

      this.currentView = view;
    },

    ensureEl: function(){
      if (!this.$el || this.$el.length === 0){
        this.$el = this.getEl(this.el);
      }
    },

    getEl: function(selector){
        return $(selector);
    },

    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);
      });
    },

    close: function(){
      var view = this.currentView;
      if (!view){ return; }

      if (view.close) { view.close(); }
      this.trigger("view:closed", view);

      delete this.currentView;
    },

    attachView: function(view){
      this.currentView = view;
    }
  });

  Marionette.Layout = Marionette.ItemView.extend({
    constructor: function () {
      this.vent = new Backbone.Marionette.EventAggregator();
      Backbone.Marionette.ItemView.apply(this, arguments);
      this.regionManagers = {};
    },

    render: function () {
      this.initializeRegions();
      return Backbone.Marionette.ItemView.prototype.render.call(this, arguments);
    },

    close: function () {
      this.closeRegions();
      Backbone.Marionette.ItemView.prototype.close.call(this, arguments);
    },

    initializeRegions: function () {
      var that = this;
      _.each(this.regions, function (selector, name) {
        var regionManager = new Backbone.Marionette.Region({
            el: selector,

            getEl: function(selector){
              return that.$(selector);
            }
        });
        that.regionManagers[name] = regionManager;
        that[name] = regionManager;
      });
    },

    closeRegions: function () {
      var that = this;
      _.each(this.regionManagers, function (manager, name) {
        manager.close();
        delete that[name];
      });
      this.regionManagers = {};
    }
  });

  
  Marionette.AppRouter = Backbone.Router.extend({

    constructor: function(options){
      Backbone.Router.prototype.constructor.call(this, options);

      if (this.appRoutes){
        var controller = this.controller;
        if (options && options.controller) {
          controller = options.controller;
        }
        this.processAppRoutes(controller, this.appRoutes);
      }
    },

    processAppRoutes: function(controller, appRoutes){
      var method, methodName;
      var route, routesLength, i;
      var routes = [];
      var router = this;

      for(route in appRoutes){
        if (appRoutes.hasOwnProperty(route)){
          routes.unshift([route, appRoutes[route]]);
        }
      }

      routesLength = routes.length;
      for (i = 0; i < routesLength; i++){
        route = routes[i][0];
        methodName = routes[i][1];
        method = controller[methodName];

        if (!method){
          var msg = "Method '" + methodName + "' was not found on the controller";
          var err = new Error(msg);
          err.name = "NoMethodError";
          throw err;
        }

        method = _.bind(method, controller);
        router.route(route, methodName, method);
      }
    }
  });
  

  Marionette.Application = function(options){
    this.initCallbacks = new Marionette.Callbacks();
    this.vent = new Marionette.EventAggregator();
    _.extend(this, options);
  };

  _.extend(Marionette.Application.prototype, Backbone.Events, {

    addInitializer: function(initializer){
      this.initCallbacks.add(initializer);
    },

    start: function(options){
      this.trigger("initialize:before", options);
      this.initCallbacks.run(this, options);
      this.trigger("initialize:after", options);

      this.trigger("start", options);
    },

    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;
        }
      }
    },

    module: function(moduleNames, moduleDefinition){
      var moduleName, module, moduleOverride;
      var parentModule = this;
      var moduleNames = moduleNames.split(".");

      var length = moduleNames.length;
      for(var i = 0; i < length; i++){

        var defineModule = (i === length-1);

        moduleName = moduleNames[i];
        module = parentModule[moduleName];

        if (!module){ 

          module = new Marionette.Application();

          if (defineModule && moduleDefinition){
            moduleOverride = moduleDefinition(module, this, Backbone, Marionette, jQuery, _);

            if (moduleOverride){
              module = moduleOverride;
            }
          }
          

          parentModule[moduleName] = module;
        }

        parentModule = module;
      }

      return module;
    }
  });

  Marionette.BindTo = {

    bindTo: function (obj, eventName, callback, context) {
      context = context || this;
      obj.on(eventName, callback, context);

      if (!this.bindings) { this.bindings = []; }

      var binding = { 
        obj: obj, 
        eventName: eventName, 
        callback: callback, 
        context: context 
      }

      this.bindings.push(binding);

      return binding;
    },

    unbindFrom: function(binding){
      binding.obj.off(binding.eventName, binding.callback);
      this.bindings = _.reject(this.bindings, function(bind){return bind === binding});
    },

    unbindAll: function () {
      var that = this;

      var bindings = _.map(this.bindings, _.identity);
      _.each(bindings, function (binding, index) {
        that.unbindFrom(binding);
      });
    }
  };

  Marionette.Callbacks = function(){
    this.deferred = $.Deferred();
    this.promise = this.deferred.promise();
  };

  _.extend(Marionette.Callbacks.prototype, {
    

    add: function(callback){
      this.promise.done(function(context, options){
        callback.call(context, options);
      });
    },

    run: function(context, options){
      this.deferred.resolve(context, options);
    }
  });

  Marionette.EventAggregator = function(options){
    _.extend(this, options);
  };

  _.extend(Marionette.EventAggregator.prototype, Backbone.Events, Marionette.BindTo, {

    bindTo: function(eventName, callback, context){
      return Marionette.BindTo.bindTo.call(this, this, eventName, callback, context);
    }
  });

  Marionette.TemplateCache = {
    templates: {},
    loaders: {},

    get: function(templateId){
      var that = this;
      var templateRetrieval = $.Deferred();
      var cachedTemplate = this.templates[templateId];

      if (cachedTemplate){
        templateRetrieval.resolve(cachedTemplate);
      } else {
        var loader = this.loaders[templateId];
        if(loader) {
          templateRetrieval = loader;
        } else {
          this.loaders[templateId] = templateRetrieval;

          this.loadTemplate(templateId, function(template){
            delete that.loaders[templateId];
            that.templates[templateId] = template;
            templateRetrieval.resolve(template);
          });
        }

      }

      return templateRetrieval.promise();
    },

    loadTemplate: function(templateId, callback){
      var template = $(templateId).html();

      if (!template || template.length === 0){
        var msg = "Could not find template: '" + templateId + "'";
        var err = new Error(msg);
        err.name = "NoTemplateError";
        throw err;
      }

      template = this.compileTemplate(template);

      callback.call(this, template);
    },

    compileTemplate: function(rawTemplate){
      return _.template(rawTemplate);
    },

    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 = {};
      }
    }
  };

  Marionette.Renderer = {

    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();
    },

    renderTemplate: function(template, data){
      var html = template(data);
      return html;
    }

  };

  var slice = Array.prototype.slice;
  

  var extend = Marionette.View.extend;
  Marionette.Region.extend = extend;
  Marionette.Application.extend = extend;

  _.extend(Marionette.View.prototype, Marionette.BindTo);
  _.extend(Marionette.Application.prototype, Marionette.BindTo);
  _.extend(Marionette.Region.prototype, Marionette.BindTo);

  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);