Ideas for Restructuring Configure Cycle View

configure-cycle-ideas.js

/**
 * FORM FIELD CONFIGURATION
 *
 * In the configure-cycle.js view, we will determine what type of
 * cycle we are dealing with, and choose the correct configuration
 * object. The keys of these configuration objects represent the file
 * name where the subview lives. The value represents the options
 * object that will be passed to the view's initialize() method.
 */

var performanceFields = {
  standard: {
    'name':                   {},
    'self-mandated':          {},
    'manager-mandated':       {},
    'direct-report-mandated': {},
  },

  advanced: {
    'complete-manager':      {},
    'release-feedback-type': {boxes: 'self', 'manager', 'direct_report'}
  }
};

var threeSixtyFields = {
  standard: {
    'name':                   {},
    'self-mandated':          {},
    'manager-mandated':       {},
    'direct-report-mandated': {},
    'anonimity':              {},
    'max-reviewers':          {},
  },

  advanced: {
    'complete-manager':      {},
    'release-feedback-type': {boxes: 'self', 'peer', 'manager', 'direct_report'}
  }
};

var checkInFields = {
  standard: {
    'name':             {},
    'self-mandated':    {},
    'manager-mandated': {},
    'individual-goals': {},
  },
  advanced: {}
};

/**
 * FIELD SUB VIEW INTERFACE
 *
 * The files listed in the configure objects above must return a
 * backbone view which adheres to the following interface.
 */

var fieldView = Backbone.View.extend({
  initialize: function(options) {},
  render:     function() {}, // Returns `this`
  serialize:  function() {}, // Returns an object, e.g. `{complete_manager: true}`
});

 /**
  * RENDERING ALL THE THESE SUBVIEWS
  * 
  *  1. Loop through the keys in the object
  *  2. Require the proper view file based on the key name
  *  3. Initialize an instance of that view passing in the value as args
  *  4. Call render on the view
  *  5. Append the view to the DOM
  */

ConfigureCycle.render = function() {
  var cycleType = 'performance'; // This would come from the first panel somehow.
  var fields    = this.fieldsFor(cycleType); // A method to grab one of the objects above.

  var standardContainer = this.$('#standard-fields');

  _.each(fields.standard, function(file, args) {
    renderField(file, args, standardContainer)
  }, this);

  var advancedContainer = this.$('#advanced-fields');

  _.each(fields.advanced, function(file, args) {
    renderField(file, args, advancedContainer)
  }, this);
}

// Private helper functions to help do the above ^

function renderFields(fields, container) {
  
}

function renderField(container, file, args) {
  require(file, function(Field) {
    this.fields[name] = new Field(args);
    this.fields[name].render();
    container.append(this.fields[name].el);
  });
}

/**
 * SAVING THE FORM
 *
 * The configure-cycle view will be responsible for saving the data. It would get
 * the data from all the sub-view fields by looping through the fields object and
 * calling serialize on it.
 */

ConfigureCycle.save = function() {
  var data = {};

  _.each(this.fields, function(name, view) {
    _.extend(data, view.serialize());
  }, this);

  this.model.set(data);
  this.model.sync();
}

 /**
  * ERROR HANDLING
  *
  * Each field sub-view will create the space where the error message will appear.
  * Then our existing logic for errors should work as is.
  */