$item.scoped(“Button”) in onItemReady() doesn’t restrict selector scope to the repeated item

Ask the community
,
1

I’m having trouble with
Using $item.scoped("Button") inside of onItemReady() or forEachItem() should only select buttons in the current item of the repeater, but it selects every button element on the page.

Working in
Wix Editor (Dev Mode)

What I’m trying to do
Update elements in a repeater using $item.scoped() with an element type selector.

What I’ve tried so far
Here’s code to reproduce the bug:

$w.onReady(function () {
  $w("#dataset1").onReady(() => {

    $w("#repeater1").onItemReady(($item, itemData, index) => {

      // This selects every Text element and Button element on the page instead of restricting the selector scope to the current item in the repeater.
      const eventText = $item.scoped("Text");
      const eventButton = $item.scoped("Button");

      eventText.text = "New Title " + index;
      eventButton.label = "New Button " + index;
    });
  });
});

Extra context
Here’s the relevant documentation:

Control what you select with repeated item scope

You can also use a selector with repeated item scope to select non-repeating elements from the global scope. However, you can’t change a repeater’s item template using a selector with repeated item scope.

You can also restrict a selector with repeated item scope to only select elements from the current repeated items and their descendants, but not elements from the global scope, by adding .scoped() to the selector.

For example, to select only the element with ID #myElement in the current repeated item, use:

$w("#myRepeater").onItemReady(($item) => { const scopedElement = $item.scoped("#myElement"); });

Documentation: Repeater Selector Scope | Velo

2

It’s the first time that I’ve seen this syntax, so have asked for clarification from the team :slight_smile:

In the meantime, and based on the code you’ve shared it should be as straightforward as applying the data to the element using the $item selector.

In short, $item within onItemReady and forEachItem etc. says “the element within each item”.

You can just do:

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData, index) => {
            $item("#text4").text = "New Title " + index;
            $item("#button1").label = "New Button " + index;
        });
    });
});

Or if you want the const like your original

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData, index) => {
            const eventText = $item("#text4");
            const eventButton = $item("#button1");

            eventText.text = "New Title " + index;
            eventButton.label = "New Button " + index;
        });
    });
});