Model View Controller (MVC) and Backbone.js

This topic applies to

Applies to

SuiteCommerce Advanced

The JavaScript source files of each module follow the MVC architectural pattern. One of the core principles of the MVC pattern is to separate the presentation layer (view) of an application from the data (model) used by the application. All interaction between views and models are handled by the controller.

To implement the MVC pattern, SuiteCommerce Advanced uses the Backbone.js libraries. Backbone.js is an open source JavaScript library that provides a framework for developing web applications.

Structure of a Backbone.js Application

Backbone.js is based on the MVC pattern. Modules that define interfaces or handle data use Backbone.js to define routers, views, and models/collections. The Case module, for example, implements each of these:

  • Routers: map URLs to client-side pages to methods that define actions and events. In feature modules, these methods initialize the views, models, and collections that handle the user interface and create frontend objects to handle data.

    Each router contains a routes object that defines the mapping between URLs and methods.

  • Views: contain methods that define the behavior of the user interface. Views are commonly associated with a model or collection. When a view is initialized, its corresponding model is usually passed. This ensures that the view has access to the data within the model. Most views define listeners that notify the view when an element within the model is modified. This enables a specific part of the application to be updated independently without having to reload the page.

    With the Elbrus release of SuiteCommerce Advanced and later, all views are composite views by default and extend Backbone.CompositeView.js.

    Views do not define the HTML or CSS of a feature or component. Instead, they specify the template that defines the HTML code for the component or feature. The templating engine handles the rendering and updating of the HTML.

  • Models and Collections: define objects that contain data used by the application. They also define the methods that create, update, or delete data.

Backbone.js Module Example

For example, the Case module defines a router (Case.Router.js) that contains the following:

'cases': 'showCasesList'
'cases?:options': 'showCasesList'
'cases/:id': 'showCase'
'newcase': 'createNewCase'

When a user clicks on an individual case from the list of support cases, instead of sending an HTTP request back to the server, the router calls the showCaseList method based on the value of the partial URL (cases). This method performs two main tasks:

  • Initializes the model that contains data for a specific support case (Case.Model).

  • Initializes the view that displays the data (Case.Detail.View)

The Case.Model model defines the data object that contains information about an individual support case. Case.Model extends the Backbone.Model by defining additional methods for performing frontend validation. When the router initializes Case.Detail.View, it passes the instance of Case.Model.

SuiteCommerce Advanced Backbone.js Implementation

The Backbone.js libraries provide a general framework for how a web application is structured and its general functionality. However, much of the specific functionality of the application must be implemented. SuiteCommerce Advanced stores Backbone.js files in the following directories:

  • Modules/third_parties/backbone.js: contains the core Backbone.js libraries. In general, you should not modify the files in this directory.

  • Modules/suitecommerce/BackboneExtras: contains extensions of core Backbone.js functionality, including Backbone.View and Backbone.Model. If you need to make changes to the Backbone.js framework, you may need to modify the files in this directory.