Page Comparison

...

• A control should have one javascript file and one HTML template file with the same name. 
  Example: html/BillingShippingAddress.html and js/BillingShippingAddress.js
  
  
• HTML template file should have plain HTML tags with knockout attributes
  Example: 
  

  <div class="form-group">
  <label class="caption">Username</label>
  <input class="form-control" type="email" placeholder="Username / Email" required autofocus="" data-bind="value: userName>
  </div>

• A control's name should unique and meaningful and should not duplicate.
  Example: BillingShippingAddress.html and BillingShippingAddress.js
  
  
• A javascript variable will be created that will act as a collection for all of the controls objects. 
  Example : var eb_billingShippingAddress = eb_billingShippingAddress || {};
  
  
• Control's properties, functions and methods name should start with camel case.
  Example: productCatalogPage
  
  
• Any object at the collection level should be generic to all instances of that control. Instance-specific information should live at the model level. 
  SitePath, TemplatePath, and ServicePath would be fixed properties for each control. These variables should be prefixed with an eb_prefix so that it does not collide with other JavaScript systems.
  Example : 
  eb_billingShippingAddress.SitePath = eb_Config.SitePath;
  eb_billingShippingAddress.TemplatePath = "html/BillingShippingAddress.html";
  eb_billingShippingAddress.ServicePath = eb_Config.ServicePath;
  
  
• The Path of the HTML template should mirror that of the path to the JS.
  Example: eb_billingShippingAddress.TemplatePath = "html/BillingShippingAddress.html";
  
  
• Each model's properties / field should be defined camel case and assign to ko.observable / ko.observableArray / ko.computed based on logic. 
  Example: 
     var _that = this;
   _that.domElement = options.domElement;
  

  _that.showError = ko.observable(0);
  _that.errorMessage = ko.observable();
  _that.showSuccess = ko.observable(0);
  _that.successMessage = ko.observable();
  _that.billingAddress = ko.observableArray();
  
  

• Should not use 'this' object directly in function. Create local variable var _self = this; and use it.

...

• GET service call method should be control level with parameters and should have deferred object handling.
  Example: 
  

  eb_billingShippingAddress.createAddressRecord = function (data, personId) {
  var defer = jQuery.Deferred();
  console.info('create address record...');

  if (!personId || personId <= 0) {
  throw { type: "argument_null", message: "personId property is required.", stack: Error().stack };
  }
  if (!data) {
  throw { data: "argument_null", message: "data property is required.", stack: Error().stack };
  }
  var service = eb_billingShippingAddress.newAddressService.replace("{personId}", personId);

  $.ajax({
  url: service,
  crossDomain: true,
  type: "POST",
  data: data,
  xhrFields: {
  withCredentials: true
  }
  }).done(function (result) {
  defer.resolve(result);
  }).fail(defer.reject);
  return defer.promise();
  };

  
  

• PATCH service call method should be control level control level with parameters and should have deferred object handling.
  Example: 
  

  eb_billingShippingAddress.updateProfileAddressRecord = function (data, addressName, personId) {
  var defer = jQuery.Deferred();
  if (!personId || personId <= 0) {
  throw { type: "argument_null", message: "personId property is required.", stack: Error().stack };
  }

  if (!addressName) {
  throw { type: "argument_null", message: "addressName property is required.", stack: Error().stack };
  }

  if (!data) {
  throw { data: "argument_null", message: "data property is required.", stack: Error().stack };
  }

  console.info('update address...');
  var service = eb_billingShippingAddress.updateProfileAddressService.replace("{personId}", personId).replace("{addressName}", addressName);
  $.ajax({
  url: service,
  type: "PATCH",
  contentType: "application/json",
  data: JSON.stringify(data),
  xhrFields: {
  withCredentials: true
  }
  }).done(function (result) {
  defer.resolve(result);
  }).fail(defer.reject);
  return defer.promise();
  };

  
  

• POST service call method should be control level with parameters and should have deferred object handling.
  Example: 
  

  eb_billingShippingAddress.createAddressRecord = function (data, personId) {
  var defer = jQuery.Deferred();
  console.info('create address record...');

  if (!personId || personId <= 0) {
  throw { type: "argument_null", message: "personId property is required.", stack: Error().stack };
  }
  if (!data) {
  throw { data: "argument_null", message: "data property is required.", stack: Error().stack };
  }
  var service = eb_billingShippingAddress.newAddressService.replace("{personId}", personId);

  $.ajax({
  url: service,
  crossDomain: true,
  type: "POST",
  data: data,
  xhrFields: {
  withCredentials: true
  }
  }).done(function (result) {
  defer.resolve(result);
  }).fail(defer.reject);
  return defer.promise();
  };

...