Hello Repeaters

Collection Data

To demonstrate populating a repeater using collection data, we created a collection named 'Greetings'. The collection holds the greeting "Hello World!" in a number of different languages.

Page Elements

Each of the 3 pages in the site contain the same page elements. The pages each contain a repeater, in which each item contains 3 text elements. The first displays the greeting language, the second displays the greeting itself, and the third displays the index of the repeater item.

Code

Some of the code is the same on all 3 pages. Each page contains the same `onItemReady` event handler that defines how to set up each new repeater item when the repeater's data property is set. 

The event handler sets the text in each of the 3 text elements and also adds `mouseIn` and `mouseOut` event handlers to each item container. The event handler provides 3 parameters. A scoped $item selector function which we use to select the correct instance of the repeated element, an `itemData` object from the repeater's data array that corresponds to the current item, and its `index` in the array.

The rest of the code on each of the 3 pages differs a bit from page to page.

• STATIC DATA page: The code begins with a static definition of an array of objects. Each object contains an `_id` property with a unique value. This is important because the repeater will check this value to determine if any items have been added or removed each time the repeater's `data` property is set. The repeater's data is set on this page after the `onItemReady` definition by assigning the static array to the repeater's `data` property.

• COLLECTION DATA page: The code begins by importing the `wix-data` API since we use it to query the 'Greetings' collection. After the `onItemReady` definition, we perform the query and store the returned items in the `collectionData` variable. Since collection data is already returned as an array of objects, each with a unique `_id` value, all we need to do is assign the returned items to the repeater's `data` property.

• EXTERNAL DATA page: The code begins by importing a function from a backend module that fetches data from an external 3rd party API. After the `onItemReady` definition we call the function that gets the data from the external API. Since the data from the 3rd party does not contain the `_id` properties and values that we need for repeaters, we create those values and only then assign the fetched data to the repeater's `data` property.