Skip to content

shoonia/repeater-scope

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

repeater-scope

Build for Velo by Wix ci build npm version

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

Velo by Wix

How to use

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

Latest available version: Check status

Installing repeater-scope with Velo npm Packages Manager

API

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

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

License

MIT

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published