Grid Component

1_gridComponent.js

App.module("Dashboard", function(Dashboard, App, Backbone, Marionette, $, _){
  "use strict";

  var Comp = {};

  // Grid Table Structure
  // --------------------

  Comp.GridRow = Marionette.ItemView.extend({
    tagName: "tr"
  });

  Comp.EmptyView = Marionette.ItemView.extend({
    template: "#dashboard-no-items-template",
    tagName: "tr"
  });

  Comp.GridStructure = Marionette.CompositeView.extend({
    tagName: "fieldset",
    itemViewContainer: "tbody",

    ui: {
      title: ".grid-title"
    },

    serializeData: function(){
      var data = Marionette.CompositeView.prototype.serializeData.apply(this, arguments);
      return _.extend(data, { hideColumns: this.options.hideColumns });
    },

    onRender: function(){
      this.ui.title.text(this.options.title);
      this.renderHeaderRow();
    },

    renderHeaderRow: function(){
      var headerTemplate = Marionette.getOption(this, "headerTemplate");
      var headerContainer = Marionette.getOption(this, "headerContainer");

      var rowHtml = Marionette.Renderer.render(headerTemplate, {});
      this.$(headerContainer).html(rowHtml);
    }
  });

  // Dashboard Grid Component
  // ------------------------

  Dashboard.DashboardGrid = Marionette.Controller.extend({

    initialize: function(options){
      this.region = Marionette.getOption(this, "region");
    },

    show: function(){
      var GridRow = Comp.GridRow.extend({
        template: this.options.gridRowTemplate
      });

      var EmptyView;

      if (this.options.emptyTemplate){
        EmptyView = Comp.EmptyView.extend({
          template: this.options.emptyTemplate
        });
      } else {
        EmptyView = Comp.EmptyView;
      }

      this.gridView = new Comp.GridStructure({
        title: this.options.title,
        collection: this.options.collection,
        template: this.options.gridTemplate,
        headerTemplate: this.options.gridHeaderTemplate,
        headerContainer: this.options.headerContainer,
        itemView: GridRow,
        emptyView: EmptyView
      });

      this.region.show(this.gridView);
    },

    close: function(){
      if (this.region){
        this.region.close();
        delete this.region;
      }
    }

  });

});

2_usingIt.js

var myGrid = new App.Dashboard.DashboardGrid({
  region: App.someRegion,
  title: "The Grid Title",
  collection: myCollectionOfStuff,
  gridTemplate: "#grid-row-template",
  headerTemplate: "#grid-header-template"
});

myGrid.show();

// ...

myGrid.close();