Context
Learning how and when to “extend” and “wrap” native SuiteCommerce code is a vital skill to learn for developers. This article will explain the difference, and the basics of how to do it within the context of SuiteCommerce development. It should be noted right away that “wrapping” is a form of “extending” code.
If you haven’t noticed already, every Backbone View and Model file you have every written “extends” the baseline Backbone objects (return Backbone.View.extend).
Definitions
“extend”
- Extending code refers to taking an existing JavaScript object and adding, updating, or overwriting portions of it. This can include changing properties, functions, really anything about the object
- Extending should occur when you wish to change the normal behavior, or add new behavior, to JavaScript objects. Usually this occurs by loading in native SuiteCommerce files and manipulating the object “prototype”. For example,
define('AddOnItems.CartLines.View',
[
'Cart.Lines.View',
'underscore',
'AddOnItemsOption.View',
],
function (
CartLinesView,
_,
AddOnItemsOptionView
) {
'use strict';
return {
loadModule: function () {
_.extend(CartLinesView.prototype,{
childViews: _.extend(CartLinesView.prototype.childViews,{
'AddOnItems.Option': function () {
return new AddOnItemsOptionView({
model: this.model,
collection: (this.parentView && this.parentView.collection)
});
}
}),
getContext: _.wrap(CartLinesView.prototype.getContext, function (fn) {
var context = fn.apply(this, _.toArray(arguments).slice(1));
context.linkAttributes = this.model.getFullLink({
quantity: null,
location: null,
fulfillmentChoice: null,
custcol_ag_parent_of_addon: null
});
return context;
})
});
}
};
});
In this example the native SuiteCommerce View “Cart.Lines.View” is loaded into the file. The underscore “extend” function is then used to extend the object prototype. There are other ways to extend objects, but this is a common one. The native object changes such that a new child view is added to the “childViews” attribute, and the “getContext” function is wrapped in order to add data to the returned object (see wrapping below).
“wrap”
- “wrapping” refers to wrapping an existing function inside of one you define.
- We commonly(maybe exclusively) use the underscore “wrap” function to do this.
- Wrapping allows the user to either:
- Change the incoming arguments of a function before the function runs, or
- Run additional code after the function executes, usually to manipulate the object being returned by the native function
- This use of wrap is used far more often, and is generally safer.
- In the example above the “getContext” function is wrapped. The context variable defined above on line 31 is the object that was returned from the original “getContext” function. The wrap function then takes that “context” and adds data to it on line 33 and then returns this new object instead.