ขั้นตอนที่ 8: รันการดำเนินการ

ที่ส่วนท้ายของหัวข้อนี้ คุณจะสามารถวางองค์ประกอบในเพจซึ่งรันการดำเนินการภายในองค์ประกอบของคุณได้ ซึ่งจะใช้ประโยชน์จากการรีจิสเตอร์การดำเนินการที่คุณสร้างไว้ในขั้นตอนก่อนหน้า

หากต้องการให้องค์ประกอบรันการดำเนินการ จะต้องมีการรับข้อความ EXECUTE_ACTION ข้อความนี้จะมีเพย์โหลดที่ส่งไปยังการดำเนินการซึ่งคุณจะต้องดึงข้อมูลค่าที่ต้องการ

ในการรับข้อความ EXECUTE_ACTION ให้แก้ไขไฟล์ render.js และอัปเดตออบเจกต์ SampleComponentViewModel ที่มีรายการต่อไปนี้:

SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));

เมื่อได้รับข้อความ EXECUTE_ACTION ระบบจะรันฟังก์ชันการเรียกกลับที่เชื่อมโยง:

    self.executeActionsListener = function (args) {
      // get action and payload
      var payload = args.payload,
      action = args.action;

      // handle 'setImageWidth' actions
      if (action && action.actionName === 'setImageWidth') {
        $.each(payload, function(index, data) {
          if (data.name === 'imageWidth') {
            self.imageWidth(data.value);
          }
        });
      }
    }

การดำเนินการนี้จะสร้างฟังก์ชัน JavaScript เพื่อรันการดำเนินการ จากนั้นใช้ Sites SDK เพื่อเรียกฟังก์ชันเมื่อมีข้อความ EXECUTE_ACTION

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

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

หมายเหตุ:

เนื่องจากลิสเทนเนอร์ของการดำเนินการเป็นการเรียกกลับ คุณควรใช้ JavaScript Closure หรือเชื่อมโยงฟังก์ชันที่เหมาะสมเพื่อให้แน่ใจว่าคุณมีสิทธิ์เข้าใช้ viewModel เมื่อรันฟังก์ชัน

ตรวจสอบผลลัพธ์สำหรับขั้นตอนที่ 8

  1. รีเฟรชเพจของคุณในไซต์ของคุณเพื่อให้ตัวสร้างไซต์สามารถนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบได้

  2. กำหนดให้เพจอยู่ในโหมดแก้ไข

  3. ลากและวางองค์ประกอบของคุณลงในเพจ

  4. ลากและวางองค์ประกอบปุ่มลงในเพจ

  5. เปิดแผงการตั้งค่ากับองค์ประกอบปุ่ม

  6. บนแท็บทั่วไป ให้เปลี่ยนป้ายกำกับของปุ่มเป็น คลิกที่นี่

  7. เลือกแท็บ ลิงค์ ที่ด้านบนของแผงการตั้งค่า

  8. เลือก การดำเนินการทริกเกอร์ เป็นประเภทลิงค์

  9. คลิกทริกเกอร์ คลิกบนปุ่ม กับองค์ประกอบปุ่ม

  10. ในไดอะล็อก ให้ขยายองค์ประกอบ A_Local_Component ที่ด้านซ้าย

  11. ลากและวางการดำเนินการ อัปเดตความกว้างของภาพ จากองค์ประกอบ A_Local_Component ไปยังด้านขวา

  12. ป้อน 300px ในฟิลด์ ความกว้างของรูปภาพเป็นพิกเซล

  13. สลับเพจเป็นโหมดแสดงตัวอย่าง

  14. คลิกปุ่ม คลิกที่นี่!

ที่จุดนี้ ขนาดของภาพของคุณจะเพิ่มเป็น 300px

หมายเหตุ:

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

ดำเนินการต่อไปยัง ขั้นตอนที่ 9: สร้างชื่อที่ไม่ซ้ำกันสำหรับแต่ละอินสแตนซ์ขององค์ประกอบ