1. Home
  2. Classes
  3. SCCollectionView

new <abstract, protected> SCCollectionView( collection )

Description

SCCollectionView is an abstract class that lets you display a collection (list) of items, usually in a grid pattern. Use this class when you want to display a list of elements on the page. It takes an array (of elements) as its only parameter.

To use SCCollectionView, create a component that inherits from the SCCollectionView class. In the child class object, call the parent class constructor with call() or apply(). SCCollectionView takes an array of elements as its only parameter. You will need to pass in the elements to your child class object.

Note that the getCellViewInstance() method, which returns an instance of a cell view, is called once for each element in the array passed to the SCCollection constructor.

The following example shows how to use SCCollectionView. Since SCCollectionView is an abstract class, we must override it with a child class. SCCollectionView has an abstract property, template, and an abstract method getCellViewInstance, both of which must be overridden.

FacetsItemsCollectionView.View.js

			define(
				'FacetsItemsCollectionView.View',
				[
					'Backbone',
					'SCCollectionView',
					'Facets.ItemCell.View',
					'RowView',
					'facets_items_collection.tpl',
					'facets_items_collection_view_row.tpl'
				]
				function(Backbone, SCCollectionView_, FacetsItemCellView, RowView, facets_items_collection_tpl, facets_items_collection_view_row_tpl) {
					'use strict';
			
					var SCCollectionView = SCCollectionView_.SCCollectionView;
			
					function FacetsItemsCollectionView() {
						var collection = ['Hats', 'Scarves', 'Gloves'];
						SCCollectionView.call(this, collection);
					
						this.template = facets_items_collection_tpl;
				}
			
				FacetsItemsCollectionView.prototype = Object.create(SCCollectionView.prototype);
			
				FacetsItemsCollectionView.prototype.constructor = FacetsItemsCollectionView;
			
				FacetsItemsCollectionView.prototype.getContext = function() {
					return {};
				}
			
				FacetsItemsCollectionView.prototype.getCellViewsPerRow = function() {
					return 2; //The number of cells to be rendered in a row.
				}
			
				FacetsItemsCollectionView.prototype.getCellViewInstance = function(
					element,
					index
				) {
					return new FacetsItemCellView({
						element: element,
						index: index
					});
				}
			
				FacetsItemsCollectionView.prototype.getRowViewInstance = function(index) {
					return new RowView({ template: facets_items_collection_view_row_tpl });
				}
			);

 

When using SCCollectionView, at a minimum, you must override the getCellViewInstance() method and return a instance of an SCView view.

To render the elements of the collection, you must provide two template files with specific placeholders. The first template file is required by your child class object to display the row container. It must contain a HTML element with the following data attribute: data-type="backbone.collection.view.rows".

facets_items_collection.tpl

			<div data-type="backbone.collection.view.rows"></div>

 

The second template file is required by the view instance to display a row. It must contain a HTML element with the following data attribute: data-type="backbone.collection.view.cells".

facets_items_collection_view_row.tpl

			<div class="facets-items-collection-view-row">
				<div data-type="backbone.collection.view.cells"></div>
			</div>

 

Note: The SCCollectionView class contains a number of private methods and properties (listed below) that you should not override or use. For example, do not get or set the values of private properties.

Parameters
Name Type Description
collection Array.<TCollectionElement>

A list of elements that will be rendered.
Details

View

SuiteCommerce 2020.2

Members

events :Object|Object

Details
Object | Object

View#events

View#events

bindings :Object

Details
Object

View#bindings

View#bindings

<private> cellContainerId

<private> cellsContainerId

<private> cellTemplate

<private> cellViewInstances

<private> collection

<private> rowsContainerId

<private> rowsCount

<abstract, protected> template

Description

The template you want to use to display the collection of elements. The HTML returned by the template must contain a HTML tag with the following data attribute: data-type="backbone.collection.view.rows". The data attribute is typically used with a DIV tag, but it does not necessarily have to be a DIV tag. When the template is rendered, the element with the data attribute is replaced with the view content (rows and cells).

Note: template is an abstract property; you must override it in your child class object.

Methods

initialize( ...options ) → {void}

Description

this is executed when a new view is instantiated - equivalent to the instance contructor.

Parameters
Name Type Attributes Description
options any <repeatable>
Returns
Details

View#initialize

View#initialize

getContext() → {Object}

Description

Returns the object which will be consumed by this view's template

Returns
Details

View#getContext

View#getContext

extend( view_definition )

Parameters
Name Type Description
view_definition View

an object with some of this class members.
Details

View#extend

View#extend

<private> appendCellsToRow()

Description

An internal method. Do not override this method. If you override this method, your SuiteCommerce website might not work as expected.

<private> calculateSpanSize()

Description

An internal method. Do not override this method. If you override this method, your SuiteCommerce website might not work as expected.

<private> createCell()

Description

An internal method. Do not override this method. If you override this method, your SuiteCommerce website might not work as expected.

<private> createCellElement()

Description

An internal method. Do not override this method. If you override this method, your SuiteCommerce website might not work as expected.

destroy()

Details

View#destroy

SCView

<private> destroyCellViewInstances()

Description

An internal method. Do not override this method. If you override this method, your SuiteCommerce website might not work as expected.

<abstract> getCellViewInstance( element, index ) → {SCView}

Description

Returns an instance of a cell view, which is used to render a cell in a row in the grid. This method is called once for each element in the array passed to SCCollectionView. When the page is rendered, each element is displayed in the cell. The returned cell view instance must extend SCView.

getCellViewInstance is an abstract method; you must override it in your child class object. It must return an instance of a cell view.

Parameters
Name Type Description
element TCollectionElement

An element of the array passed to the class contructor. TCollectionElement is the type of the element passed in the array.
index Number

The position of the cell in the array.
Returns

An instance of a cell view.

<protected> getCellViewsPerRow() → {Number}

Description

Lets you specify the number of cells to display in a row in the grid. The default number of cells displayed per row is three (3). If you override this method, it must return a positive integer.

You will only need to override this method if you override getRowViewInstance() and want to display a different number of rows.

			MySCCollectionView.prototype.getCellViewsPerRow = function() {
				return 6; 
			}
Returns

The number of cells to display in a row. Returns '3' by default. If you override this method, it must return a positive integer.

<private> getEffectiveCellViewsPerRow()

Description

An internal method. Do not override this method. If you override this method, your SuiteCommerce website might not work as expected.

<protected> getRowViewInstance( index ) → {SCView}

Description

Gets an instance of a row view. The render() method uses getRowViewInstance() to display a row on the page. You can override this method in your child class to define the view that wraps the cell views (defined with getCellViewsPerRow()). If you override this method, it must return an instance of an SCView child class.

The template of the view instance returned by this method must have a HTML tag with the attribute: data-type="backbone.collection.view.cells". For example, <div data-type="backbone.collection.view.cells"></div>.

Note: If you override this method, and you do not want to display the default number of cells per row (3), you will also need to override getCellViewsPerRow().

Parameters
Name Type Description
index Number

The number of the row being rendered. Rows are zero-based.
Returns

An instance of a row view.

render()

Details

View#render

SCView