{{announcement.body}}
{{announcement.title}}

Corvid by Wix: Event Handling of a Repeater Item

DZone 's Guide to

Corvid by Wix: Event Handling of a Repeater Item

In this post, we consider why we shouldn't nest event handler inside the Repeater loop and how we can escape it.

· Web Dev Zone ·
Free Resource

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().

JavaScript


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 Corvid, 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.

Java


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

JavaScript


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

JavaScript


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

Java


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

JavaScript


#2 initialize

JavaScript


#3 using

JavaScript


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

JavaScript


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

JavaScript


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

Posts

Topics:
corvid, javascript, tutorial, web dev, wix

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

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}