步驟 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 連結的 data-bind 引發，並傳入觸發程式名稱 imageClicked。根據使用者選擇的版面配置，目前有 3 種 <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 執行處理伺服器。

現在您已複查所需的程式碼，可以連結此觸發程式，讓您的自訂元件可以在按一下按鈕時引發。