View Architecture with Backbone.js in SuiteCommerce

TL;DR

SuiteCommerce employs Backbone.js to define its view architecture, enabling modular development that responds to user interface events and manages data dynamically. Understanding this architecture is essential for effective customization and feature enhancement in SuiteCommerce.

Overview of SuiteCommerce View Architecture

In SuiteCommerce, the view architecture operates within the Backbone.js framework. Views act as listeners to user interface events, and they coordinate with the data needed for the associated modules. When a router initializes a view, it may pass a model or collection containing the necessary data. In some cases, the view includes all required models or collections as dependencies.

Backbone Views and Composite Views

Composite Views Explained

All views are essentially Backbone.CompositeView by default. Composite views serve as containers for child views, facilitating application modularity. This design enables certain types of views to be reused across multiple contexts. For instance, child views can extend Backbone.View, making them composite views and ensuring consistent data display throughout the application.

Creating Custom Views

To create a custom view, developers should extend the Backbone view as follows:

var MyView = Backbone.View.extend({
   initialize: function() {
      // This view is now a composite view!
   }
});

Declaring Child Views

A parent view needs to declare its child views through the childViews property, which contains information about the containers (data-views). Each container lists the child views, including their rendering order and constructors. Example:

1childViews: {
2   'Buttons': {
3      'Wishlist': {
4         'childViewIndex': 10,
5         'childViewConstructor': function() {
6            return new WishlistView();
7         }
8      },
9      'SaveForLater': {
10         'childViewIndex': 20,
11         'childViewConstructor': SomeView
12      }
13   }
14}

Adding and Managing Child Views

Child views can be added to a view class using the addChildViews() method. This addition can occur either before or after the view's initialization. Developers may also pass the childViews property in the initialization options. The following code snippet illustrates this process:

1Backbone.View.beforeInitialize.install({
2   name: 'compositeView',
3   priority: 1,
4   execute: function() {
5      var childViews = _.extend({}, this.childViews, this.constructor.childViews);
6      this.childViewInstances = {};
7      this.addChildViews(childViews);
8      // Additional child views management
9   }
10});

Backward Compatibility

To maintain backward compatibility with earlier SCA releases, the CompositeView.add() method acts as a no-operation function, preventing errors from earlier custom implementations. This compatibility supports both the new and old formats within the childViews property.

Rendering Data

Rendering HTML is managed by the Backbone.js templating engine. Each view must define the following:

• A template file included within the view's define method.
• A template property specified within the view.
• A getContext method to supply the required data for the template.

Example HTML Template Code

A parent view must declare a placeholder in its associated template to render child views, as exemplified below:

<div data-view="Buttons"></div>

Related Topics

• SCA Feature Modules
• Entry Point
• Routers

Key Takeaways

• SuiteCommerce views utilize the Backbone.js framework for event handling and data coordination.
• All views default to being composite views, enabling modular application development.
• Child views are managed through the childViews property and custom constructors.
• Compatibility methods ensure that new implementations can work alongside older versions of SuiteCommerce.