ขั้นตอนที่ 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" ซึ่งเป็นค่าที่ส่งผ่านจากการเชื่อมโยง click ในขั้นตอนที่ 2 นอกจากนี้ ฟังก์ชันนี้ยังส่งผ่าน triggerPayload ที่มีฟิลด์เดียว: payloadData และส่งผ่านค่าแบบสแตติก 'some data here' ค่าเหล่านี้ imageClicked และ whoAreYou ตรงกับค่าในไฟล์ appinfo.json โดยที่มีการรีจิสเตอร์ทริกเกอร์แล้ว (ในขั้นตอนก่อนหน้านี้)

ในรหัสตัวอย่าง ทริกเกอร์จะถูกเรียกโดย data-bind ของการเชื่อมโยง click และส่งผ่านในชื่อทริกเกอร์ imageClicked ในขณะนี้ มีการแสดงองค์ประกอบ <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

ตอนนี้ คุณได้ตรวจดูรหัสที่จำเป็น และสามารถเก็บทริกเกอร์เพื่อให้องค์ประกอบที่กำหนดเองของคุณแสดงทริกเกอร์เมื่อคลิกปุ่ม