Krok 11: Podpora různých rozvržení

V tomto kroku se seznámíme s rozvrženími, která uživateli umožní změnit způsob, jakým se komponenta zobrazuje.

Vlastní komponenta může podporovat libovolný počet rozvržení, která chcete uživateli poskytnout k výběru. Každé z těchto rozvržení změní způsob zobrazení vlastní komponenty. Rozvržení jsou dalším rozšířením registračních dat.

Chcete-li se seznámit s třemi rozvrženími podporovanými v ukázkovém kódu, prohlédněte si položku "componentLayouts" v souboru appinfo.json.

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

Pokud vyvoláte panel Nastavení pro vlastní komponentu, zobrazí se volba pro přepínání mezi rozvrženími. Soubor render.js obsahuje kód pro získání aktuálně vybrané hodnoty a zjišťování změn této hodnoty, aby vaše komponenta mohla reagovat na změnu ve výběru.

Upravte soubor render.js a podívejte se na objekt SampleComponentViewModel.

• Ten obsahuje objekt typu Observable layout, na který existuje odkaz v šabloně:

  self.layout = ko.observable();

• Součástí je také funkce aktualizace, která zpracovává každou změnu této 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);

• Inicializační kód získá původní hodnotu pro rozvržení a zavolá funkci aktualizace:

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

  Služba listener pro změny vlastnosti zkontroluje všechny změny této vlastnosti a zavolá funkci aktualizace:

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

  A konečně objekt šablony sampleComponentTemplate obsahuje kód, který zajistí, aby se projevily změny v této hodnotě:

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

Společně vám tyto změny umožní vybrat rozvržení na panelu Nastavení a provést aktualizaci komponenty.