Element: <oj-bind-for-each>

Oracle® JavaScript Extension Toolkit (JET)
5.0.0

E90577-01

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:
  • 5.0.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.

During iteration, each item 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 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.

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>

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

The array 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.