Stap 11: Verschillende lay-outs ondersteunen

In deze stap gaan we lay-outs bekijken waarmee de gebruiker de manier kan wijzigen waarop de component wordt weergegeven.

In een aangepaste component kan elk gewenst aantal lay-outs worden ondersteund waaruit u de gebruiker wilt laten kiezen. Elke van deze lay-outs zorgt voor weer een andere weergave van de component. Ook lay-outs vormen een uitbreiding van de registratiegegevens.

Om de drie lay-outs te bestuderen die in de voorbeeldcode worden ondersteund, bekijkt u de ingang componentLayouts in het bestand appinfo.json.

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

Als u het paneel 'Instellingen' voor de aangepaste component opent, ziet u een optie om van lay-out te wisselen. Om ervoor te zorgen dat uw component kan reageren op selectiewijzigingen, bevat het bestand 'render.js' code voor het ophalen van de momenteel geselecteerde waarde en voor het luisteren naar wijzigingen in deze waarde.

Bewerk in het bestand render.js het object SampleComponentViewModel.

• Er is een observable genaamd layout waarnaar in de sjabloon wordt verwezen:

  self.layout = ko.observable();

• Er is een updatefunctie voor de afhandeling wanneer deze waarde verandert:

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

• De initialisatiecode zorgt voor het ophalen van de oorspronkelijke waarde voor de lay-out en voor het aanroepen van de updatefunctie:

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

  Via de listener voor eigenschapswijzigingen wordt gecontroleerd of er wijzigingen in deze eigenschap optreden en wordt de updatefunctie aangeroepen:

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

  En als laatste in de reeks heeft het sjabloonobject sampleComponentTemplate code waarmee wijzigingen in deze waarde tot uiting worden gebracht:

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

Samen zorgen deze wijzigingen ervoor dat u een lay-out kunt selecteren in het paneel 'Instellingen' en daarmee een update van de component kunt bewerkstelligen.