Etap 11: Obsługa różnych układów

Zajmiemy się tu układami pozwalającymi użytkownikowi zmieniać sposób wyświetlania składnika.

Składnik niestandardowy może obsługiwać dowolną liczbę układów, które chcemy udostępnić użytkownikowi do wyboru. Każdy z tych układów zmienia sposób wyświetlania składnika niestandardowego. Układy stanowią rozszerzenie danych rejestracji.

Aby zobaczyć trzy układy obsługiwane w przykładowym kodzie, należy przyjrzeć się wpisowi "componentLayouts" w pliku appinfo.json:

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

Jeśli wyświetlimy panel "Ustawienia" składnika niestandardowego, zobaczymy opcję przełączania się między stylami. Aby umożliwić reagowanie składnika na zmianę wyboru, plik render.js zawiera kod pobierający obecnie wybraną wartość i nasłuchujący jej zmiany.

Otworzyć plik render.js do edycji, po czym przyjrzeć się obiektowi SampleComponentViewModel.

• Istnieje obiekt "observable" layout, do którego występuje odwołanie w szablonie:

  self.layout = ko.observable();

• Istnieje funkcja aktualizacji (update) przeprowadzanej, gdy ta wartość się zmieni:

      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);

• Kod inicjalizacyjny uzyskuje pierwotną wartość układu i wywołuje funkcję aktualizacji:

  SitesSDK.getProperty('componentLayout', self.updateComponentLayout);

  Nasłuch zmian właściwości nasłuchuje wszelkich zmian tej właściwości i wywołuje funkcję aktualizacji:

  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));

  Na koniec obiekt szablonu sampleComponentTemplate zawiera kod odzwierciedlający zmiany w tej wartości:

  '<!-- ko if: alignImage() === \'right\' -->' +

Łącznie zmiany te umożliwiają wybranie układu w panelu "Ustawienia" i zaktualizowanie składnika.