단계 6: 트리거 발생

이 단계에서는 등록했던 트리거를 발생시키는 방법을 보여줍니다.

트리거는 언제든지 구성요소에 의해 발생할 수 있습니다. 일반적으로 단추 누르기 또는 테이블의 행 선택과 같은 사용자 상호작용에 의해 발생합니다. 그러나 구성요소는 REST 호출로 인해 데이터가 변경될 때와 같은 조건에 준하여 트리거를 발생시킬 수 있습니다.

이 샘플의 경우 이미지를 누를 때 whoAreYou 속성의 현재 값을 통과하여 트리거가 발생합니다.

render.js 파일을 검토하고 SampleComponentViewModel 객체를 살펴봅니다.

트리거를 발생시키려면 다음과 같이 하십시오.

1. SampleComponentViewModel 객체에서 Sites SDK를 호출하여 트리거를 발생시키는 함수를 검토합니다.

   self.raiseTrigger = function (triggerName) {
     SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
       'triggerName': triggerName, 
       'triggerPayload': { 
           'payloadData': 'some data here'
       }
     });
   };

2. 이제 사용자 인터페이스에서 트리거를 발생시키는 함수를 호출할 무언가가 필요합니다. render.js 파일을 검토하고 이 항목을 포함하도록 sampleComponentTemplate 객체를 업데이트합니다.

        '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

SampleComponentViewModel 객체에서 이미지를 누를 때 호출되는 JavaScript 함수를 볼 수 있습니다. 이 함수는 Sites SDK를 호출하여 "imageClicked" 트리거(단계 2의 click 바인딩에서 전달된 값)에 대해 정의된 모든 작업을 트리거합니다. 또한 단일 필드 payloadData가 있는 triggerPayload를 통과하고 정적 값 'some data here'를 통과합니다. imageClicked 및 whoAreYou 값은 이전 단계에서 트리거가 등록된 appinfo.json 파일의 값과 일치합니다.

샘플 코드에서 트리거는 click 바인딩의 데이터 바인드에 의해 발생하고 트리거 이름 imageClicked를 전달합니다. 사용자가 선택한 레이아웃에 준하여 현재 세 가지 <scs-image> 구성요소 렌더링이 있습니다. 각 레이아웃에 대해 트리거가 발생하는지 확인하려면 render.js 파일을 편집하여 다음과 같이 변경합니다.

• 다른 레이아웃에서 트리거를 발생시킵니다. 이 코드의 두 항목을 찾습니다.

  '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}">' +

  다음으로 코드를 변경합니다.

  '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

• 트리거에 전달할 페이로드를 지정합니다. 이 코드를 변경합니다.

      self.raiseTrigger = function (triggerName) {
        SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
          'triggerName': triggerName,
          'triggerPayload': {
            'payloadData': 'some data here'
          }
        });
      };

  이 코드를 대신 사용합니다.

      self.raiseTrigger = function (triggerName) {
        SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
          'triggerName': triggerName,
          'triggerPayload': {
            'payloadData': self.imageBannerText() // pass banner text as payload
          }
        });
      };

• render.js 파일을 Oracle Content Management 인스턴스 서버와 동기화하거나 업로드합니다.

이제 필요한 코드를 검토했으므로 단추를 누를 때 사용자정의 구성요소에 트리거가 발생하도록 트리거를 후크할 수 있습니다.