ステップ6: トリガーの呼出し

このステップでは、登録済と表示されたトリガーを呼び出す方法を示します。

トリガーは、コンポーネントが任意の時点で呼び出すことができます。通常、これは、ボタンのクリックや表内の行の選択などのユーザー操作によって呼び出されます。ただし、RESTコールが原因でデータが変更された場合など、コンポーネントが任意の基準に基づいてトリガーを呼び出すことができます。

このサンプルの場合、イメージをクリックすると、whoAreYouプロパティの現在値を渡すトリガーが呼び出されます。

render.jsファイルをレビューして、SampleComponentViewModelオブジェクトを確認します。

トリガーを呼び出すには:

1. サイトSDKをコールしてトリガーを呼び出すSampleComponentViewModelオブジェクトの関数をレビューします。

   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関数が表示されます。この関数は、サイトSDKを呼び出し、トリガー"imageClicked"(ステップ2のclickバインドから渡される値です)に定義されているすべてのアクションをトリガーするよう命じます。これはまた、単一のフィールドpayloadDataを持つtriggerPayloadを渡し、静的な値'some data here'も渡します。値imageClickedおよびwhoAreYouは、トリガーが登録されている(前述のステップ)appinfo.jsonファイルの値と一致します。

サンプル・コードでは、トリガーはclickバインドのデータバインドによって呼び出され、トリガー名imageClickedを渡します。ユーザーが選択したレイアウトに基づいて、現在、<scs-image>コンポーネントの3つのレンダリングがあります。レイアウトごとにトリガーが呼び出されるようにするには、render.jsファイルを編集して次の変更を行います。

• 別のレイアウトからトリガーを呼び出します。次のコードの2つのエントリを見つけます。

  '<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インスタンス・サーバーに同期またはアップロードします。

これで必要なコードをレビューしました。ボタンがクリックされるとカスタム・コンポーネントがこれを呼び出すように、トリガーを結び付けることができます。