Шаг 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\' -->' +

Вместе эти изменения позволяют выбрать макет на панели "Настройки" и обновить компонент.