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- ModellEnthält Daten und die meisten mit diesen Daten zusammenhängenden Logiken.

Backbone- AnsichtWird zur Darstellung des Status des entsprechenden Modells verwendet. 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- VorlageEine Wrapper-Vorlage mit vom Modell ausgefüllten Platzhaltern.

AEM Forms WorkspaceEnthä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 Aufgabe-Modell ruft anschließend den Dienst auf, der ein gemeinsamer Punkt für die Kommunikation mit dem AEM Forms-Server ist.
  4. Die Dienstklasse ruft den AEM Forms REST-Endpunkt für die Rendermethode ü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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now