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 thesrc
property of an image in the repeater to an image source found in theitemData
object and thenshow()
the image.Add event handlers to the repeated elements contained in the repeated item being created.
For example, you can use
onItemReady()
to set theonClick()
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 usingonItemReady()
may be overridden when the dataset is ready. To change the values set by the dataset, useforEachItem
inside the dataset'sonReady()
. For more information, see theforEachItem
examples.
Authorization
Request
This endpoint does not take any parameters
Response Object
The element on which the event is now registered.
Returns an empty object.
Status/Error Codes
Was this helpful?
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});
In this example, we demonstrate how to populate repeaters using static data. You can test out the code in our example template.
1// Static array of objects, each containing a unique `_id` value2const 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];1011$w.onReady(async function () {12 // Define how to set up each new repeater item13 $w('#helloRepeater').onItemReady( ($item, itemData, index) => {14 $item('#languageText').text = itemData.language;15 $item('#helloText').text = itemData.greeting;16 $item('#indexText').text = (index + 1).toString();1718 $item('#itemContainer').onMouseIn( () => {19 $item('#languageText').show();20 });2122 $item('#itemContainer').onMouseOut( () => {23 $item('#languageText').hide();24 });25 } );2627 console.log(staticData);2829 // Set the data to associate with the repeater30 $w('#helloRepeater').data = staticData;31});32