Report selector

by david_i_smith

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.4.4/backbone.marionette.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/1.0.2/backbone.radio.js"></script>
<div id="report-selector-region"></div>
<script id="report-selector-view" type="text/html">
    <div id="categories"></div>
    <div id="types"></div>
    <div id="params"></div>
    <div id="buttons"></div>
</script>
<script id="report-selector-types-view" type="text/html">
    <a href="#" class="report">Report</a>
</script>
<script id="report-selector-params-view" type="text/html">
    <a href="#" class="param">Param</a>
</script>
<script id="report-selector-buttons-view" type="text/html">
    <a href="#" class="js-run">Run</a> | <a href="#" class="js-cancel">Cancel</a>
</script>

JavaScript

/*
  Backform
  http://github.com/amiliaapp/backform

  Copyright (c) 2014 Amilia Inc.
  Written by Martin Drapeau
  Licensed under the MIT @license
 */
(function(root, factory) {

  // Set up Backform appropriately for the environment. Start with AMD.
  if (typeof define === 'function' && define.amd) {
    define(['underscore', 'jquery', 'backbone'], function(_, $, Backbone) {
      // Export global even in AMD case in case this script is loaded with
      // others that may still expect a global Backform.
      return factory(root, _, $, Backbone);
    });

  // Next for Node.js or CommonJS. jQuery may not be needed as a module.
  } else if (typeof exports !== 'undefined') {
    var _ = require('underscore');
    factory(root, _, (root.jQuery || root.$ || root.Zepto || root.ender), root.Backbone);

  // Finally, as a browser global.
  } else {
    factory(root, root._, (root.jQuery || root.Zepto || root.ender || root.$), root.Backbone);
  }
} (this, function(root, _, $, Backbone) {

  // Backform namespace and global options
  Backform = root.Backform = {
    // HTML markup global class names. More can be added by individual controls
    // using _.extend. Look at RadioControl as an example.
    formClassName: "backform form-horizontal",
    groupClassName: "form-group",
    controlLabelClassName: "control-label col-sm-4",
    controlsClassName: "col-sm-8",
    controlClassName: "form-control",
    helpClassName: "help-block",
    errorClassName: "has-error",
    helpMessageClassName: "help-block",
    hiddenClassName: "hidden",
    requiredInputClassName: undefined,

    // Bootstrap 2.3 adapter
    bootstrap2: function() {
      _.extend(Backform, {
        groupClassName: "control-group",
        controlLabelClassName: "control-label",
        controlsClassName: "controls",
        controlClassName: "input-xlarge",
        helpClassName: "text-error",
        errorClassName: "error",
        helpMessageClassName: "help-message small"
      });
     ...