Control delegation pattern

README.md

Main idea: separate the business logic from the underlying dom structure and bind execution to structure separately.

Benefits:

• changes to DOM structure can be logically separated and execute from business logic changes
• business logic changes do not rely on DOM strcuture (stability of business logic)
• binding can be executed in any technology or mix of technologies
• tests can be implemented for important business logic more easily as it is not bound to DOM.

bindings.js

// Listen for events / binding to DOM - if DOM changes change the selector only.
$('body').on('click', '#custom.dom[selector]', function(event) {
  console.log(event.target); // The actual element that fired the event.
  // call my business logic, operate on local dom
});

// Listen for events from business logic / updates, validation, xhr etc.
$(document).on('MyCustomEvent', function(event, data) {
  // handle custom events - split logic here to match event names. 
  // Target will always be document as abstract objects trigger there (assuming no access to local DOM)
});

business.js

// Implement functionlity on top of abstraction
function checkAvailability(userid, usertype, cb) {
  /// implementation for XHR + read state
  var result = true; // boolean result of check
  cb(result);
}

function ModelType() {
  this.a = ''; /// structured data / JSON.
  // Also supports custom events! Data and business logic CAN and MAY emit events!!!
  this.triggerMyEvent(0);
}

// Support custom events for business to local DOM (xhrs, data updates, validation etc)
ModelType.prototype.triggerMyEvent = function(data) {
  // See http://api.jquery.com/trigger/
  $(document).trigger('MyCustomEvent', data);
};

function updateDOM(baseElement, data) {
  // Perform DOM updates (insertions/deletions) based on data. 
  // Should check local DOM when needed.
}