snippet.js

// the app uses javascript only for effects and the tiniest bit of data manipulation, so a 
// full-stack framework doesn't necessarily make sense. I'm really looking to organize all
// of the effects we're doing throughout the app.

var NS = {};

NS.controllerName = {
  
  init : function(){
    this.doDomBindings();
    // anything else we need to do once
  },
  
  doDomBindings : function(){
    
    // ISSUE : rebinding the fn to use the context of this screws jQuery's this
    var that = this;
    
    $('#myEl').click(function(e){
      e.preventDefault();
      that.functionality.doThing( $(this) );
    });
    
  },
  
  functionality : {
    
    doThing : function( $trigger ){
      // traverse from the trigger to do a thing
      // ISSUE : context of this is no longer the parent controller
      // ISSUE : jeez that's a long call
      NS.controllerName.otherFunctionality.doFoo( this.doOtherThing );
    },
    
    doOtherThing : function(){
      
    }
    
  },
  
  otherFunctionality : {
    
    doFoo : function( fn ){    
      // do some junk      
      // ISSUE : because of nesting, context can become unpredictable
      fn.apply( this );
    },
    
    doBar : function(){
      this.doFoo( this.doBaz );
    },
    
    doBaz : function(){
    
    }
    
  }

};

NS.otherControllerName = {
  // do a bunch of stuff
};