Models in an Extension
A model in an extension lets you define how data is managed in the application, such as how it is validated, saved, or fetched from the server. When a view in an extension requires data, you typically pass a model to the view, which then renders the model data on the website.
To create a model, use the SCModel class in the SCModel component. SCModel is part of the extensibility API since SuiteCommerce 2020.1. If you want to create an extension on a version of SuiteCommerce Advanced prior to the 2020.1 release, use Backbone’s extend() method – see Frontend Models for more information.
Note that the SCModel class is not a component class like other classes in the extensibility API such as Layout or PLP. Instead of creating an instance of SCModel with the getComponent() method, you add SCModel as a dependency when defining a model.
The following example shows a basic model that uses the SCModel class.
Vendor.MyExtension.Module.Model.js
define(
'Vendor.MyExtension.Module.Model',
[
'SCModel',
'Utils'
],
function(SCModelModule, Utils) {
'use strict';
var SCModel = SCModelModule.SCModel;
function VendorMyExtensionModuleModel () {
SCModel.call(this);
this.urlRoot = function() {
return Utils.getAbsoluteUrl(getExtensionAssetsPath('services/Module.Service.ss'));
}
}
VendorMyExtensionModuleModel.prototype = Object.create(SCModel.prototype);
VendorMyExtensionModuleModel.prototype.constructor = VendorMyExtensionModuleModel;
return VendorMyExtensionModuleModel;
}
);
In the define() statement, first specify a name for the module and then an array of the module’s dependencies. Because you are creating a model based on SCModel, add SCModel as a dependency. The Utils module provides useful shortcut methods and utilities to work with a SuiteCommerce application. You do not need to add Backbone as a dependency even though SuiteCommerce uses Backbone as its foundation – SCModel replaces the Model module in Backbone.
In the callback function, create a variable, SCModel, to hold the SCModel class. You can refer to this variable later in the module.
Next, create a constructor function to define how the model works. You will return this function as the output of the module at the end of the callback function. Within the constructor function, the first thing you must do is call SCModel’s constructor with SCModel.call(this).
You can then set the properties of the model. In most cases, you must set the urlRoot of the model, which is empty by default. The value of urlRoot must be a function that returns a string. You can also define any other properties of the model in the constructor function.
Outside of the constructor function, you need to do some work to ensure your custom model functions correctly as regards its parent model, which is SCModel.
VendorMyExtensionModuleModel.prototype = Object.create(SCModel.prototype);
Set your custom model’s prototype to the prototype of SCModel. To do this, use Object.create() to create a new object, with the object passed in to the method as the prototype of the new object. This method of prototypal inheritance creates a copy of SCModel’s prototype and assigns it as the prototype of your custom model.
When you set an object’s prototype with Object.create(), however, it sets all of the object’s properties and methods, including its constructor property. To restore the constructor, reset the constructor property to the custom model’s constructor function.
VendorMyExtensionModuleModel.prototype.constructor = VendorMyExtensionModuleModel;
Finally, return the constructor function VendorMyExtensionModuleModel as the output of the module.