Schritt 11: Verschiedene Layouts unterstützen

In diesem Schritt prüfen Sie Layouts, mit denen Benutzer die Anzeige der Komponente ändern können.

Eine benutzerdefinierte Komponente kann beliebig viele Layouts unterstützen, die Sie den Benutzern zur Auswahl stellen möchten. Jedes dieser Layouts ändert die Anzeige der benutzerdefinierten Komponente. Layouts stellen eine weitere Erweiterung der Registrierungsdaten dar.

Um die drei Layouts zu prüfen, die im Beispielcode unterstützt werden, gehen Sie in der Datei appinfo.json zum Eintrag "componentLayouts".

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

Wenn Sie den Einstellungsbereich für die benutzerdefinierte Komponente öffnen, wird eine Option zum Wechseln des Layouts angezeigt. Damit die Komponente auf die geänderte Auswahl reagieren kann, enthält die Datei render.js Code zum Abrufen des derzeit ausgewählten Wertes und zum Horchen auf Änderungen an diesem Wert.

Bearbeiten Sie die Datei render.js, und prüfen Sie das Objekt SampleComponentViewModel.

• Das layout-Observable wird in der Vorlage referenziert:

  self.layout = ko.observable();

• Eine Aktualisierungsfunktion verarbeitet Änderungen an diesem Wert:

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

• Der Initialisierungscode ruft den ursprünglichen Wert für das Layout ab und ruft die Aktualisierungsfunktion auf:

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

  Der Eigenschaftsänderungs-Listener sucht nach Änderungen an dieser Eigenschaft und ruft die Aktualisierungsfunktion auf:

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

  Schließlich enthält das sampleComponentTemplate-Vorlagenobjekt noch Code, um Änderungen an diesem Wert widerzuspiegeln:

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

Zusammen ermöglichen es diese Änderungen, dass Sie das Layout im Einstellungsbereich auswählen können, sodass die Komponente aktualisiert wird.