ขั้นตอนที่ 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\' -->' +

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