Velo by Wix: The utils for repeated item scope event handlers
Tags: wix, velo, velobywix
Published: 2021-06-23 09:42:40

*npm library with utils for event handlers in Repeater*

In the article ["Event handling of Repeater Item"](https://dev.to/shoonia/velo-by-wix-event-handling-of-repeater-item-40a5), 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](https://github.com/shoonia/repeater-scope). You can install this package using [Package Manager](https://support.wix.com/en/article/velo-working-with-npm-packages)

**Velo Package Manager**

![](https://d33wubrfki0l68.cloudfront.net/6fe97044b43092f4a5db90d2997156f3886151cf/888fd/images/install-repeater-scope.jpeg)

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

**Retrieve Repeater item data when clicked**

```js
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](http://wix.to/6EADCDc).
- **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](http://wix.to/TEADCDc)

## How it works

The `useScope(event)` accepts [Event](http://wix.to/y0ADCDc) object. With the Event object, we can get the [target](http://wix.to/1kADCDc) element. It's the element that the event was fired on. Also, we can get a [type](http://wix.to/20ADCDc) and [parent](http://wix.to/30ADCDc) element for any editor [element](http://wix.to/sUAECDc).

```js
// 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.

```js
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.

```js
const data = parentElement.data;
```

We have `itemId` in the event [context](http://wix.to/YkAECDc) object. With this ID we can found the current `itemData` and `index` where the event was fired from.

```js
// 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()`](http://wix.to/wEAECDc) to get a selector function.

```js
// 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](https://github.com/shoonia/repeater-scope/issues), or my personal <a href="https://twitter.com/_shoonia" rel="me">Twitter</a>.

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

## Resources

- [Velo: About Packages](https://support.wix.com/en/article/velo-about-packages)
- [GitHub: `repeater-scope`](https://github.com/shoonia/repeater-scope)

## Posts

- [This post on my Blog](https://shoonia.site/the-utils-for-repeated-item-scope-event-handlers)
- [Event handling of Repeater Item](https://shoonia.site/event-handling-of-repeater-item)
- [Imitating hover event on repeater container](https://shoonia.site/corvid-imitate-hover-event)
- [Reduce server-side calls using a caching mechanism](https://shoonia.site/cache-for-the-jsw-functions)