Etap 6: Uaktywnianie wyzwalaczy

Pokażemy tutaj, jak uaktywniać zarejestrowany wyzwalacz.

Wyzwalacze mogą być uaktywniane w dowolnej chwili przez składnik. Zazwyczaj wyzwalacz jest uaktywniany wskutek interakcji użytkownika, takiej jak naciśnięcie przycisku lub wybranie wiersza w tabeli. Składnik może jednak uaktywnić wyzwalacz na podstawie dowolnych kryteriów — na przykład, gdy dane ulegną zmianie spowodowanej wywołaniem REST.

W tym przykładzie kliknięcie na obrazie uaktywni wyzwalacz przekazujący bieżącą wartość właściwości whoAreYou.

Otworzyć plik render.js, po czym przyjrzeć się obiektowi SampleComponentViewModel.

Aby uaktywnić wyzwalacz, należy:

1. Przyjrzeć się funkcji w obiekcie SampleComponentViewModel, która wywołuje pakiet Sites SDK w celu uaktywnienia wyzwalacza.

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

2. Teraz potrzebujemy czegoś w interfejsie użytkownika, co wywołałoby funkcję uaktywniającą wyzwalacz. W pliku render.js zaktualizować obiekt sampleComponentTemplate, tak aby zawierał ten wpis:

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

W obiekcie SampleComponentViewModel jest widoczna funkcja JavaScript, która zostanie wywołana po kliknięciu na obrazie. Funkcja ta wywołuje Sites SDK i zleca mu uaktywnienie wszystkich czynności zdefiniowanych dla wyzwalacza "imageClicked", tj. wartości przekazanej z wiązania click (w punkcie 2). Przekazywane są także triggerPayload zawierający jedno pole payloadData oraz wartość statyczna 'some data here'. Te wartości imageClicked i whoAreYou są zgodne z zawartymi w pliku appinfo.json, za pomocą którego wyzwalacz został zarejestrowany (poprzedni etap).

W przykładowym kodzie wyzwalacz jest uaktywniany przez powiązanie danych z wiązania click i przekazuje nazwę imageClicked wyzwalacza. Obecnie są dostępne trzy renderowania składnika <scs-image>, bazujące na stylu wybranym przez użytkownika. Aby zapewnić uaktywnianie wyzwalacza dla każdego z tych układów, należy dokonać w pliku render.js następujących zmian:

• Uaktywnianie wyzwalaczy z różnych układów. Odszukać dwa wystąpienia tego kodu:

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

  Zmienić ten kod na następujący:

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

• Określić ładunek przekazywany do wyzwalaczy. Zmienić następujący kod:

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

  Zamiast tego użyć następującego kodu:

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

• Zsynchronizować (lub wysłać) plik render.js z serwerem instancji Oracle Content Management.

Teraz po sprawdzeniu wymaganego kodu można podpiąć wyzwalacz, tak aby był uaktywniany przez składnik niestandardowy, gdy użytkownik kliknie na przycisku.