ขั้นตอนที่ 11: รองรับเลย์เอาต์ที่แตกต่างกัน

ในขั้นตอนนี้ เราจะตรวจสอบเลย์เอาต์ที่ช่วยให้ผู้ใช้สามารถแก้ไขลักษณะการแสดงผลขององค์ประกอบได้

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

หากต้องการตรวจดูเลย์เอาต์ทั้งสามรายการที่มีการรับรองในรหัสตัวอย่าง ให้ตรวจดูรายการ "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

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

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

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

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

  5. เลือก รูปภาพทางขวา จากคุณสมบัติของเลย์เอาต์

    ในขั้นตอนนี้ องค์ประกอบจะอัปเดตเพื่อแสดงองค์ประกอบ "<scs-image>"

ดำเนินการต่อไปยัง ขั้นตอนที่ 12: กำหนดสไตล์ที่กำหนดเอง