onItemReady( )

Sets the function that runs when a new repeated item is created.

Description

Use the onItemReady() function for code you want to run before new repeated items are rendered.

The onItemReady() function can be added as a static event handler using the Properties & Events Panel, or as a dynamic event handler using the $w selector.

Note: When calling this function, make sure to call it only once, and only in the page’s onReady() function.

The callback is triggered when you add new items by setting the data property or when new items are created based on a dataset that is connected to the repeater. It is not triggered for existing items that are updated when you set the data property. (For more information about when new items are created, see the data property.) To run code after updating existing items, use the forEachItem or forItems functions instead.

Because setting a repeater's data property triggers the onItemReady() callback to run, make sure you call onItemReady() before you set the data property. Failing to do so will mean that your callbacks are not triggered when you set the data property.

Usually, you use onItemReady() to:

Apply the repeated item's itemData to the properties and functions of the repeated elements contained in the repeated item being created.
For example, you can use onItemReady() to set the src property of an image in the repeater to an image source found in the itemData object and then show() the image.
Add event handlers to the repeated elements contained in the repeated item being created.
For example, you can use onItemReady() to set the onClick() event handler of a button in the repeater.

Note: When using a dataset to populate the contents of your repeated items, the onItemReady() callback function is triggered before the dataset populates the values of your page elements. Therefore, element values that you set using onItemReady() may be overridden when the dataset is ready. To change the values set by the dataset, use forEachItem inside the dataset's onReady(). For more information, see the forEachItem examples.

Syntax

function onItemReady(handler: ItemReadyEventHandler): Repeater
handler: function ItemReadyEventHandler($item: $w, itemData: Object, index: number): void

onItemReady Parameters

NAME

TYPE

DESCRIPTION

handler

ItemReadyEventHandler

The name of the function or the function expression to run when the item is ready.

Returns

The element on which the event is now registered.

Return Type:

Repeater

ItemReadyEventHandler Parameters

NAME

TYPE

DESCRIPTION

$item

A selector function with repeated item scope.

itemData

Object

The object from the repeater's data array that corresponds to the repeated item being created.

index

number

The index of the itemData object in the data array.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

Set up new repeated items

Copy Code

1$w("#myRepeater").onItemReady( ($item, itemData, index) => {
2  let repeatedElement = $item("#repeatedElement");
3  let nonRepeatedElement = $w("#nonRepeatedElement");
4  let itemDataValue = itemData.someProperty;
5  let isEvenItem = index % 2 === 0;
6});

Populate a repeater using static data

In this example, we demonstrate how to populate repeaters using static data. You can test out the code in our example template.

Copy Code

1// Static array of objects, each containing a unique `_id` value
2const staticData = [
3  {_id: '1', language: 'English', greeting: 'Hello World!'},
4  {_id: '2', language: 'French', greeting: 'Bonjour monde!'},
5  {_id: '3', language: 'Japanese', greeting: 'こんにちは世界！'},
6  {_id: '4', language: 'Portuguese', greeting: 'Olá Mundo!'},
7  {_id: '5', language: 'Spanish', greeting: '¡Hola Mundo!'},
8  {_id: '6', language: 'Ukrainian', greeting: 'Привіт Світ!'}
9];
10
11$w.onReady(async function () {
12  // Define how to set up each new repeater item
13  $w('#helloRepeater').forEachItem( ($item, itemData, index) => {
14    $item('#languageText').text = itemData.language;
15    $item('#helloText').text = itemData.greeting;
16    $item('#indexText').text = (index + 1).toString();
17
18    $item('#itemContainer').onMouseIn( () => {
19      $item('#languageText').show();
20    });
21
22    $item('#itemContainer').onMouseOut( () => {
23      $item('#languageText').hide();
24    });
25  } );
26
27  console.log(staticData);
28
29  // Set the data to associate with the repeater
30  $w('#helloRepeater').data = staticData;
31});
32