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
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.
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
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:
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.
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
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.
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.
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.
Credit: Source link