Element: <oj-bind-for-each>

Oracle® JavaScript Extension Toolkit (JET)
14.0.0
F60128-01

Since:
  • 4.1.0
Module:
  • ojknockout

QuickNav

Slots

Attributes

Type Definitions


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 you want to build an HTML table using <oj-bind-for-each> element the html content must be parsed by HtmlUtils.stringToNodeArray() method. Keep in mind that the composite views and the oj-module views that are loaded via ModuleElementUtils are already using that method. Thus to create a table you can either place the content into a view or call HtmlUtils.stringToNodeArray() explicitly to process the content.


Usage

Signature:

interface BindForEachElement<K, D>

Generic Parameters
ParameterDescription
KType of key when passing data via a DataProvider
DType of row data being iterated
Typescript Import Format
//To typecheck the element APIs, import as below.
import { BindForEachElement } from "ojs/ojknockout";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojknockout";

For additional information visit:


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

The oj-bind-for-each default slot is used to specify the template for binding items of an array. The slot content 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 of $current:
Name Type Description
data D 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 ko.Observable<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.

noData

The noData slot is used to specify the content to display when the data is empty. The slot content must be a <template> element. If the slot is not specified no content will be rendered. The template slot will be executed with an empty context object.

Example

Initialize the oj-bind-for-each with a noData slot specified:

<oj-bind-for-each>
  <template>
   <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
  <template>
  <template slot='noData'>
    <span><oj-button>Add item</span>
  <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.
Deprecated:
Since Description
6.2.0 Set the alias directly on the template element using the data-oj-as attribute instead.

data :(Array.<D>|DataProvider.<K, D>)

The array or an 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 DataProvider events.

Type Definitions

DefaultItemContext<D>

Properties:
Name Type Description
data D 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 ko.Observable<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.