The Utils for Repeated Item Scope Event Handlers

In this article, we discuss and consider how to handle events in the repeater items and why we shouldn't nest event handlers inside the Repeater loop.

Alexander Zaytsev

Aug. 20, 21 · Open Source Zone · Code Snippet

Like (3)

Save

1.83K Views

Introduction

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 a method available that can automatically find the parent Repeater by the fired event object.

Retrieve Repeater item data when clicked

      JavaScript
     
     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

$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.

      JavaScript
     
     // 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;

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.

      JavaScript
     
     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.

      JavaScript
     
     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.

      JavaScript
     
     // 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.find((i) => i._id === itemId);

And lastly, we create a selector function for the target element. We can use the event context with to get a selector function.

      JavaScript
     
     // 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 be helpful in your projects too.

Resources

Event

Published at DZone with permission of Alexander Zaytsev. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments