Schritt 9: Eindeutigen Titel für jede Instanz der Komponente erstellen

In diesem Schritt wird erläutert, wie Sie eindeutige Titel für verschiedene Instanzen einer Komponente erstellen.

Beim Ablegen der Komponente auf der Seite wird im Banner für die Komponente A_Local_Component angezeigt. Das ist in Ordnung, wenn der Benutzer nur eine der Komponenten auf der Seite ablegt. Möglicherweise möchten Sie aber eindeutige Titel erstellen, damit Benutzer zwischen verschiedenen Instanzen der Komponente unterscheiden können.

Sie können den Titel für die Komponente mit dem Sites-SDK aktualisieren. In diesem Schritt aktualisieren Sie ihn anhand der Eigenschaft "imageBannerText".

Um den Titel zu aktualisieren, bearbeiten Sie die Datei render.js, und fügen Sie diesen Code dem Objekt SampleComponentViewModel hinzu:

self.updateDescription = ko.computed(function () {
  SitesSDK.setProperty('description', self.imageBannerText());
});

Mit dieser Knockout-Berechnung wird die Beschreibung für die Komponente jedes Mal aktualisiert, wenn sich das imageBannerText-Observable ändert.

Ergebnisse für Schritt 9 prüfen

  1. Aktualisieren Sie die Seite in der Site, damit Sitebuilder Änderungen an der Komponente abrufen kann.

  2. Öffnen Sie die Seite im Bearbeitungsmodus.

  3. Ziehen Sie die Komponente auf die Seite.

  4. Öffnen Sie den Einstellungsbereich für die Komponente.

  5. Klicken Sie auf die Schaltfläche Benutzerdefinierte Einstellungen.

  6. Ändern Sie das Image Banner in Workplace.

  7. Schließen Sie den Einstellungsbereich, und zeigen Sie mit dem Cursor auf die Komponente, um das Banner anzuzeigen.

    Jetzt sollte A_Local_Component Workplace angezeigt werden.

Weiter mit Schritt 10: Verschachtelte Komponenten mit Inline-Bearbeitung verwenden.