Steg 11: Stöd olika layouter

I det här steget granskar vi layouter som ger användaren möjlighet att ändra hur komponenten visas.

En anpassad komponent kan stödja valfritt antal layouter som du vill ge användaren möjlighet att välja. Var och en av dessa layouter ändrar hur den anpassade komponenten visas. Layouter är ytterligare ett tillägg till registreringsdata.

Om du vill granska de tre layouter som stöds i exempelkoden ska du granska 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"
      }
    ],

Om du öppnar inställningspanelen mot den anpassade komponenten ser du ett alternativ för att växla mellan layouter. För att komponenten ska kunna reagera på ändringen i urvalet har filen render.js kod för att hämta det för närvarande valda värdet och lyssna efter ändringar av det här värdet.

Redigera filen render.js och titta på objektet SampleComponentViewModel.

• Det finns ett observerbart layout-element, som det refereras till i mallen:

  self.layout = ko.observable();

• Det finns en uppdateringsfunktion som är avsedd att hantera när detta värde ändras:

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

• Initieringskoden hämtar det ursprungliga värdet för layouten och anropar uppdateringsfunktionen:

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

  Avlyssnaren för egenskapsändringar kontrollerar om det har gjorts några ändringar i den här egenskapen och anropar uppdateringsfunktionen:

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

  Slutligen innehåller mallobjektet sampleComponentTemplate kod som speglar ändringar i det här värdet:

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

Tillsammans ger dessa ändringar dig möjlighet att välja layouten i inställningspanelen och se till att komponenten uppdateras.