步驟 11：支援不同的版面配置

在此步驟中，我們將會複查允許使用者更改元件顯示方式的版面配置。

自訂元件可以支援允許使用者選擇之任意數目的版面配置。這些版面配置都會更改自訂元件的顯示方式。版面配置為註冊資料的其他擴充功能。

若要複查範例程式碼中支援的三種版面配置，請在 appinfo.json 檔案中複查 "componentLayouts" 項目

    "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\' -->' +

這些變更可一起讓您在「設定值」面板中選取版面配置，並更新元件。