이 항목이 끝나면 구성요소 내의 작업을 실행할 페이지에 구성요소를 놓을 수 있습니다. 이전 단계에서 생성한 작업 등록을 활용합니다.
구성요소가 작업을 실행하려면 EXECUTE_ACTION 메시지를 수신해야 합니다. 이 메시지에는 작업으로 전달된 페이로드도 포함되며, 여기서 예상 값을 추출합니다.
EXECUTE_ACTION 메시지를 수신하려면 render.js 파일을 편집하고 다음 항목으로 SampleComponentViewModel 객체를 업데이트합니다.
SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));
EXECUTE_ACTION 메시지가 수신되면 연관된 콜백 함수가 실행됩니다.
self.executeActionsListener = function (args) {
// get action and payload
var payload = args.payload,
action = args.action;
// handle 'setImageWidth' actions
if (action && action.actionName === 'setImageWidth') {
$.each(payload, function(index, data) {
if (data.name === 'imageWidth') {
self.imageWidth(data.value);
}
});
}
}
작업을 실행하는 JavaScript 함수가 생성되고 EXECUTE_ACTION 메시지가 발생할 때마다 Sites SDK를 사용하여 함수를 호출합니다.
EXECUTE_ACTION 메시지가 발생할 때마다 구성요소가 호출되며, 구성요소는 처리하도록 설계된 작업만 처리할 수 있습니다. 이를 위해 작업 이름을 검사하여 구성요소가 처리할 수 있는 작업인지 확인해야 합니다.
작업 페이로드는 값의 배열입니다. 일반적으로 배열에서 원하는 페이로드 값을 찾아야 합니다.
주:
작업 리스너는 콜백이기 때문에 함수를 실행할 때 viewModel에 액세스할 수 있도록 JavaScript 클로저를 사용하거나 함수를 적절히 바인딩해야 합니다.단계 8의 결과 확인
사이트 작성기가 구성요소의 변경사항을 가져올 수 있도록 사이트의 페이지를 새로고침합니다.
페이지를 편집 모드로 전환합니다.
구성요소를 페이지 위에 끌어 놓습니다.
단추 구성요소를 페이지 위에 끌어 놓습니다.
단추 구성요소에 대해 설정 패널을 불러옵니다.
[일반 사항] 탭에서 단추 레이블을 Click me!로 변경합니다.
설정 패널의 상단에서 링크 탭을 선택합니다.
링크 유형으로 트리거 작업을 선택합니다.
단추 구성요소에 대해 단추 누르기 트리거를 누릅니다.
대화상자의 왼쪽에서 A_Local_Component 구성요소를 확장합니다.
A_Local_Component 구성요소의 Update the image width 작업을 오른쪽에 끌어 놓습니다.
Image Width in pixels 필드에 300px를 입력합니다.
페이지를 미리보기 모드로 전환합니다.
Click me! 단추를 누릅니다.
이 시점에서 이미지 크기가 300px로 증가합니다.
주:
트리거 및 작업은 구성요소 상호 통신을 지원하도록 설계되었습니다. 상태를 생성하거나 관리하도록 설계되지 않았습니다. 페이지를 새로고침하면 트리거가 발생하거나 작업이 실행되지 않은 것처럼 페이지가 원래 상태로 되돌아갑니다.단계 9: 각 구성요소 인스턴스에 대한 고유 제목 생성을 계속합니다.