Posted on

The Utils for Repeated Item Scope Event Handlers

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.

Posted on

Velo by Wix: Imitating Hover Event on Repeater Container

Motivation

We have a $w.Repeater component with items of users' cards. When we point with the mouse cursor over some item, we want to change the background color of this item to light blue color #CCE4F7, and when the cursor moves off of the item, we want to return the initial white color.

For this, we're going to use two other events that provide repeater API:

Posted on

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

JavaScript
 




x
12


 
1 
$w("#repeater").onItemReady(($item, itemData, index) => {
2 
  // it look easy
3 
  $item("#repeatedButton").onClick((event) => {
4 
    // we have all we need
5 
    console.log(
6 
      $item("#repeatedContainer"),
7 
      itemData,
8 
      index,
9 
    );
10 
  });
11 
});
12 

          

         

        

       

      

     

     

      

     

     

      

       

      

     

    

   

  

 





What's wrong with this approach?