PREVIEW: This is a preview API. Preview APIs are production quality, but can be changed on a major version without a deprecation path.
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.
During iteration, each item will have access to the same binding context that is applied to the
In addition the binding context will contain the following properties:
$current - An object that contains information for the current array item being rendered.
data - The current array item being rendered.
index - 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 - 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.
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.
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.
Initialize the oj-bind-for-each - access data using $current: