Frontend Models

This topic applies to

Applies to

SuiteCommerce Advanced

Frontend models contain the data that SuiteCommerce Advanced uses. Frontend models are part of the Backbone.js framework that defines the data component within the MVC paradigm. Each frontend model is an extension of Backbone.Model which is defined in BackboneExtras. Backbone.Model defines inheritable methods that are available to all models defined in SuiteCommerce Advanced. If necessary, a model can override these core methods. For example, many modules override the initialize method to set values of properties that are specific to that model.

Most feature modules define models that hold the data they require. There are ways models are defined in SuiteCommerce Advanced:

  • Models that are specific to features are defined by returning an object containing the model. These models are defined using the following syntax:

    return Backbone.Model.extend
  • Models that are used by the wider application context. These models are crated and their data populated when they are initialized. These models are defined in the following manner:

    ProfileModel = Backbone.Model.extend

    By defining a model this way, it can be accessed from models and views that are defined outside of the current module. In this example, the ProfileModel can be access by other modules that need to access information stored in the user’s profile. Most models that are created this way are defined as singletons. These means that there can only be one instance defined per user session.

When a router or view initializes a model, it may pass properties that the model requires. These can be properties that the frontend model uses internally or properties that are passed to the backend model.

In general, frontend models contain code that performs the following:

  • Set initial values of properties.

  • Define model-specific methods.

  • Override default methods.

  • Perform frontend validation of user-submitted data.

All frontend modules define the following properties:

  • urlRoot: specifies the backend service that is used to handle HTTP requests. This property is a string containing a partial URL.

  • validation: specifies an object that defines the properties that are validated when a user submits form data.