Vaihe 11: eri asettelujen tuki

Tässä vaiheessa tarkastellaan asetteluja, joiden avulla käyttäjä voi muuttaa komponentin näyttötapaa.

Mukautettu komponentti voi tukea kuinka montaa asettelua tahansa, jotka haluat käyttäjän pystyvän valitsemaan. Jokainen näistä asetteluista muuttaa mukautetun komponentin näyttötapaa. Asettelut ovat rekisteröintitietojen laajennuksia.

Jos haluat tutustua mallikoodissa tuettuihin kolmeen asetteluun, tarkastele "componentLayouts"-merkintää appinfo.json-tiedostossa

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

Jos avaat Asetukset-paneelin mukautetussa komponentissa, näkyviin tulee valinta, jolla asetteluja voidaan vaihdella. Jotta komponentti voisi reagoida valinnassa tehtyyn muutokseen, render.js-tiedostolla on koodi, jolla haetaan valittuna oleva arvo ja kuunnellaan kyseiseen arvoon tehtyjä muutoksia.

Muokkaa render.js-tiedostoa ja tarkastele SampleComponentViewModel-objektia.

• On olemassa havaittava layout-parametri, johon viitataan mallipohjassa:

  self.layout = ko.observable();

• On olemassa päivitysfunktio, joka käsitellään aina, kun tämä arvo muuttuu:

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

• Alustuskoodi saa asettelun alkuperäisen arvon ja kutsuu päivitysfunktion:

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

  Ominaisuuksien muutosten kuuntelija tarkistaa kaikki tähän ominaisuuteen tehdyt muutokset ja kutsuu päivitysfunktion:

  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-mallipohjaobjektilla on koodi, joka kuvastaa tämän arvon muutoksia:

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

Näiden muutosten avulla voit valita asettelun Asetukset-paneelista ja päivittää komponentin.