Backbone Marionette code improvement

Question

I have this repetitive block of code and I'm looking for ways to make it reusable and as flat as possible.

Here it is:

Controller.showKeyboardRegion = function() {
    logger.info('Controller.showKeyboardRegion => CreateAccountLayoutController');
    var view = new CreateAccountKeyboardView();
    Controller.layout.createAccountKeyboardRegion.show(view);
    view.startCreateAccountKeyboard();
}

Controller.showPhoneNumberRegion = function() {
    logger.info('Controller.showPhoneNumberRegion => CreateAccountLayoutController');
    var view = new CreateAccountPhoneNumberView();
    Controller.layout.createAccountPhoneNumberRegion.show(view);
    view.startCreateAccountPhoneNumber();
}

Controller.showNameRegion = function() {
    logger.info('Controller.showNameRegion => CreateAccountLayoutController');
    var view = new CreateAccountNameView();
    Controller.layout.createAccountNameRegion.show(view);
    view.startCreateAccountName();
}

I have nine of those in my real code. Is there a way to make this simpler and better?

Answer 1

var key;

//Here you store the necessary information for each of the 9 functions

//the key of the map will be the function name
//builder will be the reference to the constructor
//layoutObj is the name of the property from Controller.layout from which we call show()
//viewStarter will be the name of the method we call from the view
var fn = {
  showKeyboardRegion : {
    builder : CreateAccountKeyboardView,
    layoutObj : 'createAccountKeyboardRegion',
    viewStarter : 'startCreateAccountKeyboard'
  },
  showPhoneNumberRegion : {
    builder : CreateAccountPhoneNumberView,
    layoutObj : 'createAccountPhoneNumberRegion',
    viewStarter : 'startCreateAccountPhoneNumber'
  },
  showNameRegion : {
    builder : CreateAccountNameView,
    layoutObj : 'createAccountNameRegion',
    viewStarter : 'startCreateAccountName'
  }
}

/* EVERYTHING BEYOND HERE IS WHAT ATTACHES THE ABOVE DATA TO Controler */

//for each entry in the map
for(key in fn){
  //a quick property check to see if property is on the map
  if(!fn.hasOwnProperty(key)) continue;

  //attach to controller per key
  Controller[key] = (function(key){

    //we use a closure and passed in key, so that the function will use the
    //value of key at that iteration, since key will be changed over the course
    //of the loop.

    //so we extract the data from the map for a bit of readability
    var entry = fn[key];
    var builder = entry.builder;
    var layoutObj = entry.layoutObj;
    var viewStarter = entry.viewStarter;

    //return our handler
    return function(){
      var view = new builder();
      logger.info('Controller.'+key+' => CreateAccountLayoutController');
      Controller.layout[layoutObj].show(view);
      view[viewStarter]();
    }
  }(key));

}