Steg 6: Orsaka triggrar

I det här steget visar vi dig hur du aktiverar triggern som har registrerats.

Triggrar kan aktiveras när som helst av en komponent. Vanligtvis aktiveras den av en användarinteraktion, ett klick på en knapp eller val av en rad i en tabell. Komponenten kan emellertid orsaka triggern baserat på valfria kriterier, t.ex. när data ändras på grund av ett REST-anrop.

För det här exemplet gäller att när du klickar på bilden så orsakas en trigger som överför det aktuella värdet för egenskapen whoAreYou.

Granska filen render.js och titta på objektet SampleComponentViewModel.

Så här orsakar du en trigger:

1. Granska funktionen i objektet SampleComponentViewModel som anropar SDK:t för webbplatser för att orsaka triggern.

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

2. Nu behöver du något i användargränssnittet som anropar funktionen för att orsaka triggern. Granska filen render.js och uppdatera objektet sampleComponentTemplate så att du får den här posten:

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

I objektet SampleComponentViewModel ser du den JavaScript-funktion som anropas när någon klickar på bilden. Den här funktionen anropar SDK:t för webbplatser för att säga till det att utlösa alla åtgärder som definierats för triggern "imageClicked", som är det värde som överförs från click-bindningen i steg 2. Den överför även en triggerPayload som har ett enda fält, payloadData, och överför ett statiskt värde, 'some data here'. Dessa värden, imageClicked och whoAreYou, matchar dem i filen appinfo.json, där triggern registreras (i föregående steg).

I exempelkoden aktiveras triggern av en databindning av click-bindningen och överför triggernamnet imageClicked. Det finns för närvarande tre återgivningar av komponenten <scs-image>, baserat på vilken layout användaren väljer. För att säkerställa att triggern aktiveras för var och en av layouterna ska du redigera filen render.js genom att göra följande ändringar.

• Orsaka triggrar från olika layouter. Hitta de två posterna för den här koden:

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

  Ändra koden till följande:

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

• Ange den nyttolast som ska överföras till triggrarna. Ändra den här koden:

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

  Använd den här koden istället:

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

• Synkronisera eller ladda upp filen render.js till servern för instansen av Oracle Content Management.

Nu när du har granskat den kod som krävs kan du koppla triggern, så att den anpassade komponenten orsakar den vid ett klick på knappen.