Interaktion mit Backbone

Backbone ist eine Bibliothek, die das Erstellen und Verfolgen von MVC-Architektur in Webanwendungen unterstützt. Die Grundidee von Backbone ist, Ihre Benutzeroberfläche in logischen Ansichten zu organisieren, unterstützt von Modellen, die bei Modelländerungen jeweils einzeln aktualisiert werden können, ohne dass die Seite neu gezeichnet werden muss. Weitere Informationen zu Backbone finden Sie unter https://backbonejs.org.

Einige Hauptkonzepte sind die folgenden:

Backbone-Modell: Enthält Daten und die meiste mit diesen Daten verknüpfte Logik.

Backbone-Ansicht: Wird verwendet, um den Status des jeweiligen Modells darzustellen. Eine Backbone-Ansicht verhält sich im Prinzip wie ein Controller, der Benutzeroberflächenereignisse wie Benutzerklicks oder Modellereignisse (wie Datenänderungen) erfasst und die Benutzeroberfläche entsprechend ändert.

HTML-Vorlage: Eine Wrapper-Vorlage mit Platzhaltern, die durch das Modell gefüllt werden.

AEM Forms-Arbeitsbereich: Enthält mehrere einzelne Komponenten. Jede Komponente:

  • Stellt ein einzelnes logischen Element der Benutzeroberfläche dar.
  • Kann eine Sammlung ähnlicher Komponenten sein.
  • Erstellt aus Backbone-Modell, Backbone-Ansicht und HTML-Vorlage.
  • Enthält Verweis zu einem Dienst.
  • Enthält Verweis zu erforderlichen Dienstprogrammen.

Wenn eine Komponente initialisiert wurde, werden folgende Objekte erstellt:

  • Eine neue Instanz des Backbone-Modells für die Komponente wird erstellt. Dienst wird ins Modell injiziert.
  • Eine neue Instanz der Backbone-Ansicht wird erstellt.
  • Instanz des entsprechenden Modells, HTML-Vorlage und Dienstprogramme werden in die Ansicht injiziert.

In der Backbone-Ansicht gibt es eine Ereigniszuordnung für die verschiedenen Ereignisse, die durch Benutzeroberflächeninteraktionen mit einem entsprechenden Handler auftreten können. Diese Zuordnung wird ausgelöst, wenn eine Komponente initialisiert wird.

Wenn eine Ansicht initialisiert wird, ruft die Ansicht das entsprechende Modell zum Datenabruf vom Server auf. Nachdem alle für eine Ansicht erforderlich Daten verfügbar sind, gibt die Ansicht die Daten in dem Format wieder, das in der HTML-Vorlage angegeben ist. Mehrere Ansichten können dasselbe Modell für die Kommunikation nutzen.

Ein Beispiel:

  1. Benutzer klickt in der Aufgabenliste auf eine Aufgabenvorlage.
  2. Aufgabenansicht erfasst den Klick und ruft Renderfunktion im Aufgabenmodell auf.
  3. Das Task-Modell ruft daraufhin den Service auf, der ein gemeinsamer Punkt für die gesamte Kommunikation mit dem AEM Forms-Server ist.
  4. Die Service-Klasse ruft den AEM Forms-REST-Endpunkt für die Render-Methode über Ajax auf.
  5. Der Erfolgsrückruf für diesen Ajax-Aufruf wird im Aufgabenmodell definiert.
  6. Aufgabenmodell erstellt ein Backbone-Ereignis als Benachrichtigung, dass der Renderaufruf abgeschlossen ist.
  7. Eine andere Ansicht, die Aufgabendetailansicht, überwacht dieses Ereignis des Aufgabenmodells.
  8. Aufgabendetailansicht ändert dann die Aufgabendetailvorlage, um die gerenderte Aufgabe (Formular, Details, Anlagen, Hinweise usw.) für den Benutzer anzuzeigen.

Auf dieser Seite