Krok 11: Podpora rôznych rozložení

V tomto kroku skontrolujeme rozloženia, pomocou ktorých môže používateľ zmeniť spôsob zobrazenia komponentu.

Vlastný komponent môže podporovať ľubovoľný počet rozložení, ktoré chcete dať používateľovi na výber. Každé z týchto rozložení zmení spôsob zobrazenia vlastných komponentov. Rozloženia sú ďalším rozšírením dát registrácie.

Ak chcete vidieť tri rozloženia podporované vo vzorovom kóde, pozrite si položku "componentLayouts" v súbore appinfo.json:

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

Ak otvoríte panel Nastavenia pre vlastný komponent, uvidíte voľbu na prepínanie medzi rozloženiami. Ak chcete komponent nastaviť tak, aby reagoval na túto zmenu vo výbere rozloženia, použite súbor render.js, ktorý obsahuje kód na načítanie aktuálne vybranej hodnoty a prijatie zmien vykonaných v tejto hodnote.

Upravte súbor render.js a pozrite si objekt SampleComponentViewModel.

• Obsahuje pozorovaný objekt observable layout, na ktorý sa odkazuje v šablóne:

  self.layout = ko.observable();

• K dispozícii je funkcia aktualizácie, ktorá sa môže použiť pri každej zmene tejto hodnoty:

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

• Kód inicializácie načíta pôvodnú hodnotu rozloženia a zavolá funkciu aktualizácie:

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

  Prijímač zmien vlastností vyhľadá všetky zmeny vykonané v tejto vlastnosti a zavolá funkciu aktualizácie:

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

  Nakoniec je k dispozícii objekt šablóny sampleComponentTemplate s kódom, ktorý zobrazí zmeny vykonané v tejto hodnote:

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

Všetky tieto zmeny vám umožňujú vybrať si rozloženie na paneli Nastavenia a komponent aktualizovať.