Schritt 6: Trigger auslösen

In diesem Schritt erfahren Sie, wie der registrierte Trigger ausgelöst wird.

Trigger können zu jedem Zeitpunkt von einer Komponente ausgelöst werden. Normalerweise wird ein Trigger durch eine Benutzerinteraktion ausgelöst, wie das Klicken auf eine Schaltfläche oder die Auswahl einer Tabellenzeile. Die Komponente kann den Trigger jedoch basierend auf beliebigen Kriterien auslösen, z.B. wenn Daten aufgrund eines REST-Aufrufs geändert werden.

Wenn Sie bei diesem Beispiel auf das Bild klicken, wird ein Trigger ausgelöst, der den aktuellen Wert der Eigenschaft whoAreYou übergibt.

Prüfen Sie die Datei render.js und das Objekt SampleComponentViewModel.

So lösen Sie einen Trigger aus:

1. Prüfen Sie im Objekt SampleComponentViewModel die Funktion, die das Sites-SDK zum Auslösen des Triggers aufruft.

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

2. Jetzt müssen Sie ein Element in der Benutzeroberfläche festlegen, das die Funktion zum Auslösen des Triggers aufruft. Prüfen Sie die Datei render.js, und aktualisieren Sie das Objekt sampleComponentTemplate mit diesem Eintrag:

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

Im Objekt SampleComponentViewModel sehen Sie die JavaScript-Funktion, die beim Klicken auf das Bild aufgerufen wird. Diese Funktion ruft das Sites-SDK auf, damit dieses alle für den Trigger "imageClicked" definierten Aktionen auslöst. Das ist der Wert, der vom click-Binding aus Schritt 2 übergeben wird. Die Funktion übergibt auch eine triggerPayload mit dem einzelnen Feld payloadData sowie den statischen Wert 'some data here'. Die Werte imageClicked und whoAreYou stimmen mit denen in der Datei appinfo.json überein, in der der Trigger registriert ist (vorheriger Schritt).

Im Beispielcode wird der Trigger durch ein Daten-Binding des click-Bindings ausgelöst und übergibt den Triggernamen imageClicked. Derzeit gibt es drei Renderings der Komponente <scs-image> basierend auf dem vom Benutzer ausgewählten Layout. Um sicherzustellen, dass der Trigger für jedes der Layouts ausgelöst wird, nehmen Sie die folgenden Änderungen in der Datei render.js vor.

• Lösen Sie Trigger von verschiedenen Layouts aus. Suchen Sie die beiden Einträge dieses Codes:

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

  Ändern Sie den Code wie folgt:

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

• Geben Sie die Payload an, die an die Trigger übergeben werden soll. Ändern Sie diesen Code:

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

  Verwenden Sie stattdessen diesen Code:

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

• Synchronisieren Sie die Datei render.js, bzw. laden Sie diese auf den Oracle Content Management-Instanzserver hoch.

Nachdem Sie sich mit dem erforderlichen Code vertraut gemacht haben, können Sie den Trigger verknüpfen, damit die benutzerdefinierte Komponente ihn beim Klicken auf die Schaltfläche auslöst.