步骤 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\' -->' +

总之，通过这些更改，您可以在“设置”面板中选择布局并更新组件。