ในขั้นตอนนี้ เราจะตรวจสอบเลย์เอาต์ที่ช่วยให้ผู้ใช้สามารถแก้ไขลักษณะการแสดงผลขององค์ประกอบได้
องค์ประกอบที่กำหนดเองสามารถรองรับเลย์เอาต์ได้ตามจำนวนที่คุณต้องการอนุญาตให้ผู้ใช้เลือกได้ เลย์เอาต์แต่ละรายการเหล่านี้จะแก้ไขลักษณะการแสดงผลขององค์ประกอบที่กำหนดเอง เลย์เอาต์ต่างๆ เป็นส่วนขยายอีกรายการของข้อมูลการรีจิสเตอร์
หากต้องการตรวจดูเลย์เอาต์ทั้งสามรายการที่มีการรับรองในรหัสตัวอย่าง ให้ตรวจดูรายการ "componentLayouts"
ในไฟล์ appinfo.json
"componentLayouts": [ { "name": "default", "displayName": "IMAGE_LEFT_LAYOUT" }, { "name": "right", "displayName": "IMAGE_RIGHT_LAYOUT" }, { "name": "top", "displayName": "IMAGE_TOP_LAYOUT" } ],
หากคุณเปิดแผงข้อมูลการตั้งค่ากับองค์ประกอบที่กำหนดเอง คุณจะเห็นตัวเลือกในการสลับระหว่างเลย์เอาต์ ในการใช้งานองค์ประกอบของคุณให้ตอบสนองการเปลี่ยนแปลงในการเลือกรายการ ไฟล์ render.js จะมีรหัสที่ใช้เรียกค่าที่เลือกไว้ในปัจจุบัน และรับข้อมูลการเปลี่ยนแปลงในค่านี้
แก้ไขไฟล์ render.js
และดูที่ออบเจกต์ SampleComponentViewModel
มีรายการที่สังเกตเห็นได้ของ layout
ซึ่งมีการอ้างอิงในเทมเพลท ดังนี้
self.layout = ko.observable();
คุณสามารถใช้ฟังก์ชันการอัปเดตในการจัดการเมื่อค่านี้เปลี่ยนแปลงไป ดังนี้
self.updateComponentLayout = $.proxy(function (componentLayout) { var layout = componentLayout ? componentLayout : 'default'; self.layout(layout); self.alignImage(layout === 'right' ? 'right' : 'left'); self.showTopLayout(layout === 'top'); self.showStoryLayout(layout === 'default' || layout === 'right'); self.componentLayoutInitialized(true); }, self);
รหัสการเริ่มต้นจะเรียกค่าเดิมของเลย์เอาต์ และเรียกฟังก์ชันการอัปเดตดังนี้
SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
ลิสเทนเนอร์การเปลี่ยนแปลงคุณสมบัติจะตรวจสอบการเปลี่ยนแปลงใดๆ ที่เกิดกับคุณสมบัตินี้ และเรียกฟังก์ชันการอัปเดต ดังนี้
self.updateSettings = function (settings) { if (settings.property === 'componentLayout') { self.updateComponentLayout(settings.value); } else if (settings.property === 'customSettingsData') { self.updateCustomSettingsData(settings.value); } }; SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));
สุดท้ายนี้ ออบเจกต์ของเทมเพลท sampleComponentTemplate
จะมีรหัสที่แสดงให้เห็นการเปลี่ยนแปลงต่างๆ ในค่านี้
'<!-- ko if: alignImage() === \'right\' -->' +
การเปลี่ยนแปลงดังกล่าวนี้จะช่วยให้คุณสามารถเลือกเลย์เอาต์ของคุณในแผงข้อมูลการตั้งค่า และมีการอัปเดตองค์ประกอบด้วยเช่นกัน
ตรวจสอบผลลัพธ์สำหรับขั้นตอนที่ 11
รีเฟรชเพจของคุณในไซต์ของคุณเพื่อให้ตัวสร้างไซต์สามารถนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบได้
กำหนดให้เพจอยู่ในโหมดแก้ไข
ลากและวางองค์ประกอบของคุณลงในเพจ
เปิดแผงการตั้งค่ากับองค์ประกอบของคุณ
เลือก รูปภาพทางขวา จากคุณสมบัติของเลย์เอาต์
ในขั้นตอนนี้ องค์ประกอบจะอัปเดตเพื่อแสดงองค์ประกอบ "<scs-image>"
ดำเนินการต่อไปยัง ขั้นตอนที่ 12: กำหนดสไตล์ที่กำหนดเอง