issue on repeaters - need help ASAP

Ask the community
,
21

Don’t put event handlers inside any Repeater loop. A small library that helps to event handlers: https://github.com/shoonia/repeater-scope#repeater-scope

import { useScope } from 'repeater-scope';

$w('#repeater').onItemReady(($item, itemData, index) => {
    // no any event handlers
});

// Use global selector $w
$w('#repeaterBox').onMouseIn((event) => {
    const { $item } = useScope(event);

    $item('#repeaterBox').style.backgroundColor = 'lightblue';
});
22

Nice library, might use to get itemData , it seems easier.

Wouldn’t this work though?

$w("#box1").onMouseIn((event, $item) =>{
    $item("#box1").style.backgroundColor="lightblue"
})
23

@alexanderz61239
Александр, очень интересный материал, обязательно надо будет взглянуть на это :wink:

24

@alexanderz61239 Thanks,
but if i need onClick handler on the repeater and need to use the itemData inside it?
how can i make it work outside the onItemReady?

25

@naimibaby
It’s a best practice to handle repeater events outside the loop. Velo docs have a good example of how to do it

Or this small library :

import { useScope } from 'repeater-scope';

$w.onReady(() => {
  // use dynamic event handler with global selector function $w
  $w('#repeatedButton').onClick((event) => {
    const { $item, itemData, index, data } = useScope(event);

    $item('#repeatedText').text = itemData.title;
  });
});