Trinn 11: Støtte for ulike oppsett

I dette trinnet skal vi gjennomgå oppsett som tillater at brukeren endrer hvordan komponenten blir vist.

En egendefinert komponent kan støtte et hvilket som helst antall oppsett som du vil tillate at brukeren velger. Hvert enkelt av disse oppsettene endrer hvordan den egendefinerte komponenten blir vist. Oppsett er en annen utvidelse av registreringsdataene.

Når du skal gjennomgå de tre oppsettene som støttes i eksempelkoden, kan du gjennomgå oppføringen "componentLayouts" i filen appinfo.json

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

Hvis du åpner ruten Innstillinger for den egendefinerte komponenten, ser du et valg du kan bruke til å veksle mellom oppsett. For at komponenten skal kunne reagere på endringen i utvalg, har filen render.js kode som henter den valgte verdien og lytter etter endringer i denne verdien.

Rediger filen render.js, og se på objektet SampleComponentViewModel.

• Det finnes et observerbart objekt kalt layout, som det refereres til i malen:

  self.layout = ko.observable();

• Det finnes en oppdateringsfunksjon som skal aktiveres hver gang denne verdien blir endret:

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

• Initialiseringskoden får den opprinnelige verdien for oppsettet og kaller oppdateringsfunksjonen:

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

  Egenskapsendringslytteren kontrollerer om det er gjort endringer av denne egenskapen, og kaller oppdateringsfunksjonen:

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

  Malobjektet sampleComponentTemplate har kode som gjenspeiler endringene i denne verdien:

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

Til sammen gjør disse endringene at du kan velge ønsket oppsett i ruten Innstillinger og få komponenten til å bli oppdatert.