30
loading...
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
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;
});
});data array that corresponds to the repeated item being created.itemData object in the data array.// 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);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.
30