Views

Within the Backbone.js framework, views listen to the user interface events and coordinate with the data required by the associated module. In some modules, when a router initializes a view, the router also passes a model or collection containing the data required. In other modules, the view includes all necessary models or collections as dependencies.

View Architecture

Note:

The information in this section applies to the Elbrus release of SCA and later. However, if you are customizing SCA 2020.2 and later, do not use Backbone.View as described in the following sections and examples. For release 2020.2 and later, you should use SCView as described in the extensibility API reference. SCView is the SuiteCommerce implementation of Backbone.View.

All Backbone.Views are Backbone.CompositeViews by default. Composite views are views that contain child views. Composite views further modularize the application, so some types of views can be used in multiple contexts. For example, some modules define child views that are extensions of Backbone.View. Therefore, those child views are also Backbone.CompositeViews, which ensures that some types of data are displayed in a consistent way across the application.

All views extend Backbone.CompositeView by default. Any custom views should use code similar code to this example:

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

A parent view must declare its child views. To do this, each Parent View declares the childViews property, which is an object containing all the Container names from the View (the data-views). Each container has an object with the Child View’s name and an object for each View with the following information:

childViewIndex – this is the order in which the children render in that container.
childViewConstructor – This can be either functions or Backbone.View subclasses. Each defined function must return an instance of a Backbone.View.

The following example declares the childViews property, containing the Buttons container. The Buttons container declares the Wishlist and SaveForLater objects. You can include multiple views in one container.

          ...
   childViews: {
      'Buttons': {
         'Whishlist': {
            'childViewIndex': 10
         ,   'childViewConstructor': function() {
               return new WhishlistView();
            }
         }
         'SaveForLater': {
            'childViewIndex': 20
         ,   'childViewConstructor': SomeView
         }
      }
   }
...

Note:

You can add new child views to a view class using the addChildViews( ) method. You can also add new child views to an instance of a view using the addChildViews( ) method or by passing the childViews property in the options when initializing it.

To add a plugin before or after you initialize the View, add the plugin to the View class and execute code in those moments (beforeInitialize and afterInitialize), as shown:

          ...
Backbone.View.beforeInitialize.install({
      name: 'compositeView'
   ,   priority: 1
   ,   execute: function ()
      {
         var childViews = _.extend({}, this.childViews, this.constructor.childViews);

         this.childViewInstances =  {};

         this.addChildViews(childViews);

         if (this.options)
         {
            if (this.options.extraChildViews)
            {
               console.warn('DEPRECATED: "options.extraChildViews" is deprecated. Use "options.childViews" instead');
               //Add extra child views from view's initialization options

               this.addChildViews(this.options.extraChildViews);
            }

            if (this.options.extraChildViews)
            {
               //Add child views from view's initialization options
               this.addChildViews(this.options.extraChildViews);
            }
         }
      }
   });
...

Backward Compatibility

To make this change backward compatible with earlier releases of SCA, Backbone.CompositeView.js includes a CompositeView.add() method as a no operation (noop) method. This prevents any errors when calling it from any custom code in implementations prior to the Elbrus release. SCA supports the previous format as shown:

          ...
   childViews: {
      'Promocode': function()
      {
         return new PromocodeView({model: this.model.get('promocode')});
      }
   ,   'SomeWidget': SomeWidget
   }
...

In this case, the container and the view have the same name, and you can combine the old and the new format in the childViews property.

          ...
   childViews: {
      Promocode':
      {
         'Promocode':
         {
            childViewIndex: 10
         ,   childViewConstructor: function(options)
            {
               return new PromocodeView({model: this.model.get('promocode')});
            }
         }
      }
   }
...

View Architecture (Vinson Release and Earlier)

This section applies to the Vinson release of SCA and earlier.

In the Vinson release of SCA and earlier, each view must declare itself as a composite view using the require( ) method and call CompositeView.add(this) within the initialize( ) method. Any custom views should use code similar to this example:

          ...
   var CompositeView = require('Backbone.CompositeView');
   var MyView = new backbone.View.extend({
      initialize: function()
      {
         CompositeView.add(this);
         //now this view is a composite view!
      }
   });
...

Rendering Data From the View

The process of rending the HTML is handled by the templating engine and the Backbone.js framework. To work within this framework, each view defines the following:

A template file included as a dependency within the define method of the view.
A template property defined in the body of the view.
A getContext method that returns all of the data attributes required by the template.

When you compile SCA using the developer tools, Gulp.js uses these elements to compile the templates into the application. See Logic-less Templates and Handlebars.js for more information about templates and the template engine.

If implementing the Elbrus release of SCA or later, a data view acts as a container for multiple child views. Any parent view must declare a placeholder element in its associated template to render the children within it as depicted in the following example:

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