Trin 11: Understøtte forskellige layouts

Dette trin indeholder en gennemgang af layouts, der gør det muligt for brugeren at ændre, hvordan komponenten vises.

En tilpasset komponent kan understøtte et vilkårligt antal layouts, som brugeren skal kunne vælge. Hvert af disse layouts ændrer den måde, som den tilpassede komponent vises på. Layouts er endnu en udvidelse af registreringsdataene.

For at gennemgå de tre layouts, der understøttes i eksempelkoden, skal du gennemgå posten "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 åbner panelet Indstillinger for den tilpassede komponent, vises der et valg, som bruges til at skifte mellem layouts. For at gøre det muligt for din komponent at reagere på ændringer i det valgte indeholder filen render.js kode, der henter den aktuelt valgte værdi og lytter efter ændringer af værdien.

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

• Der er et observerbart layout-objekt, som skabelonen refererer til:

  self.layout = ko.observable();

• Der er en opdateringsfunktion, som bruges, når værdien ændres:

      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 henter layoutets oprindelige værdi og kalder opdateringsfunktionen:

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

  Listeneren for egenskabsændring kontrollerer, om der er ændringer af denne egenskab, og kalder opdateringsfunktionen:

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

  Endelig indeholder skabelonobjektet sampleComponentTemplate kode, der afspejler ændringer i denne værdi:

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

Tilsammen lader disse ændringer dig vælge dit layout i panelet Indstillinger og få komponenten til at blive opdateret.