d

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567
ouroffice@aware.com

 

KMF

Velo by Wix: Event Handling of a Repeater Item

At first sight, adding event handling for repeated items looks easy. You just handling events of repeated items inside Repeater loop methods there you have all needed data and scope with selector $item().

What’s wrong with this approach?

Sometimes, the loop may set a few event handlers for the same item when you change order, filter, or sort Repeater Items. Each iteration of the loop may add a copy of the callback function to the handler when it starts again. You may don’t pay attention to twice running code if you just hide or show some component by an event. But if you work with APIs or wixData, then you can get a lot of problems.

My team and I consider this approach as an anti-pattern and we don’t use it more. For the “static” Repeaters which fill up once and don’t change anymore during a user session, this approach can be used.

But if you would like to do dynamic fill up your Repeater or change its items, you shouldn’t set a handler function inside the loop. Let’s see another way.

Selector Scope

In the Velo, we have two types of selector functions.

  • Global Scope Selectors
  • Repeated Item Scope Selectors

The Global Scope Selectors it’s $w(). We can use it anywhere in the frontend part of the Wix site. If we use $w() with Repeater Items, then it changes all items.

Repeated Item Scope

A selector with repeated item scope can be used to select a specific instance of a repeating element.

We can get repeated-item-scope selector in a few ways.

In the loop, selector as the first argument in callback function for .forEachItem(), .forItems(), and .onItemReady() methods.

Deprecated way, selector as the second argument in an event handler. It still works but you don’t have to use it

And with an event context, we can get the selector function with:

Let’s try to reproduce how we can use event.context instead of Repeater loop methods.

In this way, we have only one callback for all elements with the specific ID. Using context we can get the active item scope, its itemData, and index

Now, we see how to do more careful handling of events in the Repeater. But this code not good enough for reuse. Let’s move the scope selector logic out event handler to the separate method.

Create a Hook

Our hook will have next steps:

#1 Implementation

#2 initialize

#3 using

We create a hook with createScope(getData). It will be work with a specific Repeater. The argument getData is a callback. It has to return the Repeater data.

The createScope will return a new function useScope(event) that has a connection with the specific Repeater data. The useScope(event) accepts an event object and return the data of the current scope.

For the realization of createScope(getData) function, we will create a public file public/util.js

We can get Repeater data with getData(), and we have the event context. All we need just return Scope selector and item data as an object. We will use getter syntax for returning itemData, index, and data.

public/util.js

Code Snippet on GitHub

If you don’t work with getter/setter for property accessors, you can look here how it works.

Let’s see how we can use the hook on the page.

HOME Page Code

Now, we can reuse the selector hook with all Repeater in all site pages.

JSDoc

The Velo code editor supports JSDocs, it’s a markup language that is used inside JS block comments. JSDocs provides static type checking, adds the autocomplete, and makes good documentation of your code. I recommend using JSDocs.

Code snippet with JSDocs:

Don’t remove JSDocs in your code! In the building process, all comments will be removed automatically from the production bundle.

Posts

Credit: Source link

Previous Next
Close
Test Caption
Test Description goes like this