When you work with a repeater in code, it's important to understand how the items in the repeater are created, updated, and deleted.
A repeater's data is an array of objects, which you get or set using the repeater's data
property. Each object in this array must have a unique _id
property that links the object to a specific repeated item in the repeater. The _id
value can include only alphanumeric characters and hyphens (-
). Besides _id
, each object in the data array can include any other properties you need.
The repeater doesn't automatically populate it's data into the elements inside each repeated item. You control how to populate the data into those elements by using the onItemReady()
, onItemRemoved()
, forItems()
, and forEachItem()
callback functions.
Connect 2 items to a repeater.
When you first add a repeater to your page, it displays repeated items using the design and default values from its item template. At this stage, no custom data is shown.
To display your own data, set the repeater's data
property to an array of objects, each with a unique _id
. When you do this, the repeater creates new items for each object in the array.
Set a repeater with initial data. When the addButton
is clicked, add another item to the repeater.
When you update a repeater's data
property, repeated items with the same _id
values as before won't automatically populate the updated values into the elements of each repeated item. Simply reassigning the data
property doesn't refresh what's shown for those items if the _id
values don't change.
To ensure that changes to your data are populated into the repeated elements, use the repeater's forEachItem()
or forItems()
methods. You can use these methods to update the elements inside each repeated item, so that the displayed content always matches the latest data in your array.
Set a repeater with initial data. When the updateButton
is clicked, update an item in the repeater.
When you want to remove an item from a repeater, set the repeater's data
property to a new array that no longer includes the object with the _id
of the item you want to remove.
The repeater then checks which repeated items are represented in the new data array. For any repeated item whose _id
is missing, the repeater removes the item.
As each item is removed, the onItemRemoved()
event handler runs and the display reflects the repeater without those items.
Set a repeater with initial data. When the removeButton
is clicked, remove the last item from the repeater.