Velo by Wix: 반복 항목 범위 이벤트 핸들러의 유틸리티

Repeater의 이벤트 처리기용 유틸리티가 포함된 npm 라이브러리

기사에서 repeater 항목의 이벤트를 처리하는 방법과 Repeater 루프 내부에 이벤트 핸들러를 중첩하면 안 되는 이유를 고려했습니다. 여기에서 항목 선택기와 항목 데이터를 수신하기 위한 논리를 캡슐화하는 코드 스니펫을 만들었습니다.

코드 스니펫을 복사하여 붙여넣는 것이 편하지 않습니다. 따라서 이 작은 도우미를 npm 패키지repeater-scope로 옮겼습니다. Package Manager을 사용하여 이 패키지를 설치할 수 있습니다.

Velo 패키지 관리자



실행된event 객체로 상위 Repeater를 자동으로 찾을 수 있는 방법을 사용할 수 있습니다.

클릭 시 반복 레이아웃 항목 데이터 검색

import { useScope } from 'repeater-scope';

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

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

반환 매개변수

$item - repeated item scope 을 포함하는 선택기 함수입니다.

itemData - 생성 중인 반복 항목에 해당하는 반복 레이아웃data 배열의 개체입니다.

index - itemData 배열에 있는 data 개체의 인덱스입니다.

데이터 - A repeater's data array

작동 방식

useScope(event)는 Event 객체를 받아들입니다. Event 개체를 사용하여 target 요소를 가져올 수 있습니다. 이벤트가 발생한 요소입니다. 또한 모든 편집기type에 대해 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;

먼저 하위 항목이 처리된 상위 repeater를 찾아보겠습니다. 우리는 $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;
}

repeater 속성에서 직접 repeater 데이터 배열을 가져옵니다.

const data = parentElement.data;

이벤트context 객체에 itemId가 있습니다. 이 ID를 사용하여 이벤트가 시작된 현재 itemData 및 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