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 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.
Syntax
function onItemReady(handler: ItemReadyEventHandler): Repeaterhandler: function ItemReadyEventHandler($item: $w, itemData: Object, index: number): void
onItemReady Parameters
NAME
TYPE
DESCRIPTION
The name of the function or the function expression to run when the item is ready.
ItemReadyEventHandler Parameters
NAME
TYPE
DESCRIPTION
The object from the repeater's data
array that corresponds to the repeated item being created.
The index of the itemData
object in the data
array.
Returns
This function does not return anything.
Return Type:
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});
This example creates an event handler that sets up new repeated items by setting the source of a repeated image element and the text value of a repeated text element to values from the repeated item's data.
It also sets an event handler that runs when the image in a repeated item is clicked. The event handler changes the value of a repeated text element to indicate whether the repeated item is "selected". It also changes the value of a non-repeated text element which serves as a counter for how many repeated items are "selected".
1$w("#myRepeater").onItemReady( ($item, itemData, index) => {2 const repeatedText = $item("#repeatedText");3 const repeatedImage = $item("#repeatedImage");4 const numSelected = $item("#nonRepeatedText");56 repeatedImage.src = itemData.img;7 repeatedText.text = itemData.description;89 repeatedImage.onClick( (event) => {10 if(repeatedText.text === "Selected"){11 repeatedText.text = itemData.description;12 numSelected.text = (Number(numSelected.text) - 1).toString();13 }14 else {15 repeatedText.text = "Selected";16 numSelected.text = (Number(numSelected.text) + 1).toString();17 }18 } );19} );20
onItemReady()
by setting a repeater's dataThis example demonstrates setting the data property of a repeater, which triggers the onItemReady function.
The site visitor enters search text and when they click a Search button, a query runs that returns the results for that query. The results of that query are displayed in a repeater. A message is displayed if there are no results.
When the data property is set for the repeater, the onItemReady function is automatically triggered.
1import wixData from 'wix-data';23$w.onReady(function () {4 $w("#myRepeater").onItemReady(($item, itemData, index) => {5 $item("#myText").text = itemData.text;6 $item("#myImage").src = itemData.image;78 // Link to the dynamic item page9 $item("#myButton").link = itemData.url;10 });11});1213export function searchButton_click(event) {14 let searchResult = $w('#searchInput').value;15 wixData.query("MyCollection")16 .eq("searchField", searchResult)17 .find()18 .then((results) => {19 if (results.totalCount > 0) {20 $w("#myRepeater").data = results.items;21 } else {22 $w('#noResultsMsg').show();23 }24 })25 .catch((err) => {26 let errorMsg = err;27 });28}29