Velo by Wix: Repeated item event handlers v2.0

Here's my third post about event handling in repeated items. I'll show you a method that has always been mentioned in the documentation. I'm surprised that I hadn't noticed it earlier.

Yes, and the event handling in Repeater is something that I found to be confusing in my Velo projects initially.

I have written two articles on this topic, which you can find on this blog.

1. Event handling of Repeater Item - in this section, we will explore how to efficiently manage events for repeated items. To simplify the process, we have developed a practical helper function.
2. The utils for repeated item scope event handlers - Here, we have developed an improved code snippet that intelligently retrieves parent Repeater item data from the event automatically.

The main idea of these two articles is that it is generally not recommended to nest an event handler inside any Repeater loop. Doing so can cause issues where the callback function is triggered multiple times by a single event.

The Velo documentation uses the following method to handle events using event context.

$w.onReady(function () {
  $w('#myRepeatedImage').onClick((event) => {
    const $item = $w.at(event.context);

    $item('#myRepeatedText').text = 'Selected';
  });
});

In most cases, the existing information is sufficient. However, if we require more specific details such as the item's data object or the index of the item that was triggered, the documentation offers the following way:

$w.onReady(function () {
  $w('#repeatedContainer').onClick((event) => {
    const $item = $w.at(event.context);
    const data = $w('#myRepeater').data;

    const clickedItemData = data.find((i) => i._id === event.context.itemId);
    const clickedItemIndex = data.findIndex((i) => i._id === event.context.itemId);

    console.log('itemData', clickedItemData);
    console.log('index', clickedItemIndex);
  });
});

It does not look bad. But we want to have a better 😊

Method forItems()

The Repeater has the forItems() method that allows us to run specific repeated items with the given list of IDs. I have never used it before. Previously, if I wanted to rerender some Repeater items then I just used the forEachItem() method. forItems() allows us to run the callback function for specific items, not all.

In the documentation, there is an example code that updates the data of two items based on their IDs.

$w('#myRepeater').forItems(['item1', 'item4'], ($item, itemData, index) => {
  $item('#repeatedImage').src = itemData.img;
  $item('#repeatedText').text = itemData.description;
});

Wow, this is a fantastic opportunity! It's always been right there in the documentation. I can't believe I didn't notice it earlier.

For example, we can solve our current issue with receiving item data.

$w.onReady(function () {
  $w('#repeatedButton').onClick((event) => {
    // Run callback for item ID from event context
    $w('#myRepeater').forItems([event.context.itemId], ($item, itemData, index) => {
      $item('#myRepeatedText').text = 'Selected';

      console.log('itemData', itemData);
      console.log('index', index);
    });
  });
});

Magic. For me, it's a very expressive code. And it's a good alternative to all known methods that I used before, like:repeater-scope npm package.

Resources

• Velo: Understanding the Scope of Selector Functions
• Retrieve Repeater Item Data When Clicked
• Get the element context in which an event was fired

Posts

• Query selector for child elements
• Promise Queue
• Event handling of Repeater Item
• The utils for repeated item scope event handlers