Wix by VIX :繰り返し項目スコープイベントハンドラのためのUutis

リピータのイベントハンドラのためのutilsを持つNPMライブラリ
記事では、我々はリピータ項目のイベントを処理する方法と、リピータループ内でイベントハンドラをネストしないようにする理由を検討しました.そこで、我々はアイテムセレクタとアイテムデータを受け取るためのロジックをカプセル化するコードスニペットを作成しました.
コードの断片のコピーと貼り付けは快適ではありません.したがって、私はこれらの小さいヘルパーをNPMパッケージに動かしましたrepeater-scope . このパッケージをインストールするにはPackage Manager
パッケージマネージャー

解雇された親リピータを自動的に見つける方法がありますevent オブジェクト.
クリックするとリピータ項目データを取得します

import { useScope } from 'repeater-scope';

$w.onReady(() => {
  $w('#repeatedButton').onClick((event) => {
    const { $item, itemData, index, data } = useScope(event);

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

パラメータを返す

セレクタ機能付きrepeated item scope .

itemdata -リピータからのオブジェクトdata 作成される繰り返し項目に対応する配列.

インデックス-のインデックスitemData オブジェクトをdata 配列.

データA repeater's data array

動作方法

The useScope(event) 受け入れるEvent オブジェクト.イベントオブジェクトを使用すると、target 要素.その事件が発火したのはその要素だ.また、我々は得ることができますtype and parent エディタの要素element .

// Gets the element that the event was fired on.
const targetElement = event.target;

// Gets the element's parent element.
const parentElement = event.target.parent;

// Gets the element's type.
const elementType = event.target.type;

まず最初に、子アイテムが処理された親リピータを見つけましょう.我々が得るまで、我々は親の要素を登ります$w.Repeater 要素.

let parentElement = event.target.parent;

// Check the parent element type.
// If it isn't a Repeater take the next parent of the parent element.
while (parentElement.type !== '$w.Repeater') {
  parentElement = parentElement.parent;
}

リピータプロパティからリピータデータ配列を直接取得します.

const data = parentElement.data;

我々はitemId その事件でcontext オブジェクト.このIDを使用すると、現在のitemData and index イベントが発火された場所.

// ID of the repeater item where the event was fired from
const itemId = event.context.itemId;

// Use the Array methods to find the current itemData and index
const itemData = data.find((i) => i._id === itemId);
const index = data.findIndex((i) => i._id === itemId);

最後に、ターゲット要素のセレクタ関数を作成します.イベントコンテキストを使用できます $w.at() セレクタ関数を取得します.

// Gets a selector function
// which selects items from a specific repeater item
const $item = $w.at(event.context);

任意の質問?

バグ、機能要求などの問題がある場合は、私に連絡してくださいGitHub Issue , または私の個人.
私はこの小さなライブラリもあなたのプロジェクトに役立つことを願っています.

資源

Velo: About Packages

GitHub: repeater-scope

ポスト

This post on my Blog

Event handling of Repeater Item

Imitating hover event on repeater container

Reduce server-side calls using a caching mechanism