repeater-scope

The utils for repeated item scope event handlers in Velo by Wix.

How to use

You use the Package Manager to manage the npm packages in your site.

Latest available version: Check status

API

Using global select function $w() you can select needed elements group in Repeater Item Template.

• useScope(event)
• createScope(cb)
• getRepeater(event) (since v2.0.0)
• updateItem(event, callback) (since v2.0.0)

useScope

Automatic find the parent Repeater by emitted event object.

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;
  });
});

// or a static event handler
export function repeatedButton_dblClick(event) {
  const { $item, itemData, index, data } = useScope(event);
};

createScope

Create scope function with specific data array. It can be useful with state management libraries.

import { createScope } from 'repeater-scope';

// Create a scope with a callback function that returns actual repeater data.
const useScope = createScope(() => {
  return $w('#repeater').data;
});

export function repeatedButton_Click(event) {
  const { $item, itemData, index, data } = useScope(event);
};

getRepeater

Gets parent Repeater by event

import { getRepeater } from 'repeater-scope';

$w.onReady(() => {
  $w('#repeatedButton').onClick((event) => {
    const $repeater = getRepeater(event);

    $repeater.hide();
  });
});

updateItem

Update Repeated Item by event

import { updateItem } from 'repeater-scope';

$w.onReady(() => {
  $w('#repeatedButton').onClick((event) => {
    updateItem(event, ($item, itemData, index) => {
      $item('#repeatedText').text = itemData.title;
    });
  });
});

Syntax

function useScope(event: $w.Event): ScopeData

function createScope(event: $w.Event): ScopeData

type ScopeData = {
  $item: $w.$w;
  itemData: ItemData;
  index: number;
  data: ItemData[];
}

type ItemData = {
  _id: string;
  [key: string]: any;
}

function getRepeater(event: $w.Event): $w.Repeater

function updateItem(event: $w.Event, callback: $w.ForItemCallback): void

Parameters

• $item - A selector function with repeated item scope.
• itemData - The object from the repeater's data array that corresponds to the repeated item being created.
• index - The index of the itemData object in the data array.
• data - A repeater's data array

Resources

• Event handling of Repeater Item
• The utils for repeated item scope event handlers
• Repeated item event handlers v2.0
• Repeater Introduction

License

MIT