11. lépés: Különböző elrendezések támogatása

Ebben a lépésben azokat az elrendezéseket tekintjük át, amelyek lehetővé teszik a felhasználónak az összetevő megjelenítési módjának megváltoztatását.

Az egyéni összetevők tetszőleges számú olyan elrendezést támogathatnak, amelyeket engedélyezni kíván a felhasználónak a választáshoz. Az elrendezések mindegyike megváltoztatja az egyéni összetevő megjelenítési módját. Az elrendezések a regisztrációs adatok újabb kiterjesztését jelentik.

Az ebben a mintakódban támogatott három elrendezés áttekintéséhez nézze meg a "componentLayouts" bejegyzést az appinfo.json fájlban.

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

Ha egyéni összetevőjéhez megnyitja a Beállítások panelt, látni fogja az elrendezések közötti váltásra szolgáló beállítást. Annak engedélyezéséhez, hogy összetevője reagáljon a kijelölésben való változásra, a render.js fájl kódot tartalmaz a jelenleg kijelölt érték beolvasására és az érték módosításainak figyelésére.

Szerkessze a render.js fájlt, és nézze meg a SampleComponentViewModel objektumot.

• A sablonban hivatkozott layout observable (megfigyelhető) elem található itt:

  self.layout = ko.observable();

• A következő update függvény szolgál az érték módosításainak kezelésére:

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

• Az inicializálási kód beolvassa az elrendezéshez tartozó eredeti értéket, és az update függvényt hívja:

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

  A tulajdonság változásának figyelője megkeresi a tulajdonság módosításait, és az update függvényt hívja:

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

  Végül a sampleComponentTemplate sablon objektum kódja válaszol az értékben bekövetkezett változásokra:

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

Ezek a módosítások együtt lehetővé teszik a saját elrendezés kijelölését a Beállítások panelen és az összetevő frissítését.