ที่ส่วนท้ายของหัวข้อนี้ คุณจะสามารถวางองค์ประกอบในเพจซึ่งรันการดำเนินการภายในองค์ประกอบของคุณได้ ซึ่งจะใช้ประโยชน์จากการรีจิสเตอร์การดำเนินการที่คุณสร้างไว้ในขั้นตอนก่อนหน้า
หากต้องการให้องค์ประกอบรันการดำเนินการ จะต้องมีการรับข้อความ 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
รีเฟรชเพจของคุณในไซต์ของคุณเพื่อให้ตัวสร้างไซต์สามารถนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบได้
กำหนดให้เพจอยู่ในโหมดแก้ไข
ลากและวางองค์ประกอบของคุณลงในเพจ
ลากและวางองค์ประกอบปุ่มลงในเพจ
เปิดแผงการตั้งค่ากับองค์ประกอบปุ่ม
บนแท็บทั่วไป ให้เปลี่ยนป้ายกำกับของปุ่มเป็น คลิกที่นี่
เลือกแท็บ ลิงค์ ที่ด้านบนของแผงการตั้งค่า
เลือก การดำเนินการทริกเกอร์ เป็นประเภทลิงค์
คลิกทริกเกอร์ คลิกบนปุ่ม กับองค์ประกอบปุ่ม
ในไดอะล็อก ให้ขยายองค์ประกอบ A_Local_Component
ที่ด้านซ้าย
ลากและวางการดำเนินการ อัปเดตความกว้างของภาพ จากองค์ประกอบ A_Local_Component
ไปยังด้านขวา
ป้อน 300px ในฟิลด์ ความกว้างของรูปภาพเป็นพิกเซล
สลับเพจเป็นโหมดแสดงตัวอย่าง
คลิกปุ่ม คลิกที่นี่!
ที่จุดนี้ ขนาดของภาพของคุณจะเพิ่มเป็น 300px
หมายเหตุ:
ทริกเกอร์และการดำเนินการออกแบบมาเพื่อรองรับการสื่อสารระหว่างองค์ประกอบ ไม่ได้ออกแบบมาเพื่อสร้างหรือจัดการสถานะ หากคุณรีเฟรชเพจ เพจจะแปลงกลับเป็นสถานะเริ่มแรกราวกับว่าไม่มีการเรียกทริกเกอร์หรือรันการดำเนินการดำเนินการต่อไปยัง ขั้นตอนที่ 9: สร้างชื่อที่ไม่ซ้ำกันสำหรับแต่ละอินสแตนซ์ขององค์ประกอบ