Views

This topic applies to

Applies to

SuiteCommerce Advanced

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

This section applies to the Elbrus release of SCA and later.

All Backbone.Views are Backbone.CompositeViews by default. Composite views are simply 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. As a consequence, those Child Views are also Backbone.CompositeViews. This 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 similar code to the example below:

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

... 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); } } } }); ...
Backwards 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 Elbrus release. SCA supports the previous format as shown below:

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

In this case, the container and the view name have the same, and you can combine the old and the new format and 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 similar code to the example below:

... 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 SuiteCommerce Advance 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 on 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> ...