Element: <oj-bind-for-each>

Oracle® JavaScript Extension Toolkit (JET)
5.2.0
E97691-01

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

Version:

5.2.0

Since:

4.1.0

Module:

ojknockout

ForEach Binding

Use <oj-bind-for-each> to bind items of an array to the specified markup section. The markup section is duplicated for each array item when element is rendered. <oj-bind-for-each> requires the application to specify a single <template> element as its direct child. The markup being stamped out should be placed inside of this <template> element.

Note that the <oj-bind-for-each> element will be removed from the DOM after binding is applied. For slotting, applications need to wrap the oj-bind-for-each element inside another HTML element (e.g. <span>) with the slot attribute. The oj-bind-for-each element does not support the slot attribute.

Also note that if the <oj-bind-for-each> element is being used to programmatically build an HTML table, it must be placed in the view of an oj-module and loaded via ModuleElementUtils.

Examples

Initialize the oj-bind-for-each - access data using $current:

 <oj-bind-for-each data='[{"type":"Apple"},{"type":"Orange"}]'>
   <template>
     <p><oj-bind-text value='[[$current.data.type]]'></oj-bind-text></p>
   </template>
 </oj-bind-for-each>

Initialize the oj-bind-for-each - access data using alias:

 <oj-bind-for-each data="[[fruits]]" as="fruit">
   <template>
     <p><oj-bind-text value="[[fruit.data.type]]"></oj-bind-text></p>
   </template>
 </oj-bind-for-each>

Slots

JET elements can have up to two types of child content:

Any child element with a slot attribute will be moved into that named slot, e.g. <span slot='startIcon'>...</span>.
Any child element lacking a slot attribute will be moved to the default slot, also known as a regular child. This is documented under the "Default" heading below.

Default

PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.

The oj-bind-for-each default slot is used to specify the template for binding items of an array if no named slots were defined by the application. The slot must be a <template> element.

When the template is executed for each item, it will have access to the same binding context that is applied to the <oj-bind-for-each> element. In addition the binding context will contain the following properties:

$current - An object that contains information for the current item. (See the table below for a list of properties available on $current)
alias - If as attribute was specified, the value will be used to provide an application-named alias for $current. This can be especially useful if multiple oj-bind-for-each elements are nested to provide access to the data for each level of iteration.

Properties:

Name	Type	Description
`data`	Object	The current array item being rendered.
`index`	number	Zero-based index of the current array item being rendered. The index value is not updated in response to array additions and removals and is only recommended for static arrays.
`observableIndex`	number	An observable that refers to the zero-based index of the current array item being rendered. The `observableIndex` value is updated in response to array additions and removals and can be used for both static and dynamic arrays.

Attributes

as :string

An alias for the array item. This can be especially useful if multiple oj-bind-for-each elements are nested to provide access to the data for each level of iteration.

data :array|oj.DataProvider

The array or an oj.DataProvider that you wish to iterate over. Required property. Note that the <oj-bind-for-each> will dynamically update the generated DOM in response to changes if the value is an observableArray.