Element: <oj-bind-for-each>

Oracle® JavaScript Extension Toolkit (JET)
7.1.0

F18183-01

Signature:

class ojBindForEach

QuickNav

Attributes


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

Version:
  • 7.1.0
Since:
  • 4.1.0
Module:
  • ojknockout

Module usage

See JET Module Loading for an overview of module usage within JET.

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.

Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

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.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.

data :(Array.<any>|oj.DataProvider.<any, any>)

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, or in response to oj.DataProvider events.