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:
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:
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.