Support Ukraine

Velo by Wix: The utils for repeated item scope event handlers

npm library with utils for event handlers in Repeater

In the article "Event handling of Repeater Item", we considered how to handle events in the repeater items and why we shouldn't nest event handler inside the Repeater loop. There we created a code snippet that encapsulates the logic for receiving item selector and item data.

Copying and pasting the snippet of code isn't comfortable. Therefore I moved these little helpers to npm package repeater-scope. You can install this package using Package Manager

Velo Package Manager
installing an npm package in velo editor

There is available a method that can automatic find the parent Repeater by the fired event object.

Retrieve Repeater item data when clicked
import { useScope } from 'repeater-scope';

$w.onReady(() => {
  $w('#repeatedButton').onClick((event) => {
    const { $item, itemData, index, data } = useScope(event);

    $item('#repeatedText').text = itemData.title;
  });
});

Returns parameters

How it works

The useScope(event) accepts Event object. With the Event object, we can get the target element. It's the element that the event was fired on. Also, we can get a type and parent element for any editor element.

// Gets the element that the event was fired on.
const targetElement = event.target;

// Gets the element's parent element.
const parentElement = event.target.parent;

// Gets the element's type.
const elementType = event.target.type;

In the first, let's find the parent repeater where the child item was handle. We will climb up the parent's elements until we will get the $w.Repeater element.

let parentElement = event.target.parent;

// Check the parent element type.
// If it isn't a Repeater take the next parent of the parent element.
while (parentElement.type !== '$w.Repeater') {
  parentElement = parentElement.parent;
}

We get the repeater data array directly from the repeater property.

const data = parentElement.data;

We have itemId in the event context object. With this ID we can found the current itemData and index where the event was fired from.

// ID of the repeater item where the event was fired from
const itemId = event.context.itemId;

// Use the Array methods to find the current itemData and index
const itemData = data.find((i) => i._id === itemId);
const index = data.findIndex((i) => i._id === itemId);

And the last, we create a selector function for the target element. We can use the event context with $w.at() to get a selector function.

// Gets a selector function
// which selects items from a specific repeater item
const $item = $w.at(event.context);

Any questions?

If you have any issues as bugs, feature requests, and more, please contact me GitHub Issue, or my personal Twitter.

I hope this small library will helpful in your projects too.

Resources

Posts