DEV Community

Alexander Zaytsev
Alexander Zaytsev

Posted on • Edited on • Originally published at shoonia.site

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;
  });
});
Enter fullscreen mode Exit fullscreen mode

Returns parameters

  • $item - A selector function with repeated item scope.
  • itemData - The object from the repeater's data array that corresponds to the repeated item being created.
  • index - The index of the itemData object in the data array.
  • data - A repeater's data array

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

const data = parentElement.data;
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)