Im vorherigen Artikel habe ich Sie in Ihre Lernerfahrung vorgestellt, Werte zwischen den Ansichten im Rückgrat zu übergeben. Dieser Artikel konzentriert sich auf die Einführung von drei Kommunikationsmethoden zwischen Backbone -Ansichten.
Der kritischste Abschnitt, um ein MVC -Framework zu beherrschen, besteht darin, wie man zwischen verschiedenen Ansichten kommuniziert. Als ich Angular zuvor verwendete, fand ich, dass ereignisbasierte Kommunikationsmethoden ($ on, $ emit, $ boardcast) oder servicebasierte Methoden sehr nützlich waren. Nach dem Umzug zum Rückgrat wurde aufgrund des unzureichenden Verständnisses des Ereignismechanismus von Backbone und einer sehr flexiblen Verwendung eine gute Kommunikationsmethode nicht gefunden. Bis ich diesen Artikel sah, benutzte der Autor ein einfaches Beispiel, um die drei Kommunikationsmethoden zwischen Rückgratansichten klar zu erklären. Die Übersetzung ist wie folgt:
Die Webseite, die ich entwickle, enthält zwei Hauptteile, nämlich Dokument und Seitenleiste.
Wie im obigen Bild gezeigt, habe ich drei Ansichten eingerichtet:
ApplicationView - enthält die untere Ansicht als äußerste Ansicht
DocumentView - Zeigt den inhaltlich bearbeiteten oder durchgebrannten Inhalt an
Sidebarview - einige dokumentbezogene Informationen anzeigen
DocumentView und SideBarview sind Unteranlagen von ApplicationView, sodass die Gesamtansichtsstruktur in der folgenden Abbildung dargestellt ist:
Der Benutzer arbeitet in einer beliebigen Unteransicht, und die andere Unteransicht muss entsprechend geändert werden. Da die beiden Kinderansichten die andere Partei jedoch nicht direkt benachrichtigen können (dh ihre Bereiche sind nicht direkt miteinander verbunden, im Gegensatz zur Elternansicht, die die Bereiche aller Kinderansichten enthalten kann), brauche ich einen Ereignismechanismus.
Nachdem ich gegoogelt hatte und mich auf die Methoden anderer Leute bezogen hatte, fasste ich die folgenden drei verschiedenen Kommunikationsweisen zusammen.
1. Die Ereignisse durch die Elternansicht übergeben
Ich veriete Veranstaltungen für seine beiden untergeordneten Ansichten über die übergeordnete Ansicht (ApplicationView). Da die übergeordnete Ansicht den Umfang aller Kinderansichten enthält, verwenden Sie sie am besten als Medium für die Ereignisbereitstellung.
Der JavaScript -Code lautet wie folgt:
var ApplicationView = Backbone.view.extend ({initialize: function () {this.documentView = new documentView ({übergeordnet: this}); stuffthis.sidebarView.trigger('documentEdit');}});var DocumentView = Backbone.View.extend({onEdit : function(){this.trigger('edit');}});var SidebarView = Backbone.View.extend({initialize : function(){this.on('documentEdit', this.onDocumentEdit, this);}, ondocumentEdit: function () {// reagieren auf document edit.}});Diese Methode ist jedoch nicht effizient. Weil ich dem ApplicationView dokumentiert () einen zusätzlichen Ereignishandler hinzufügen muss. Wenn in der Kinderansicht eine Reihe von Ereignissen übergeben wird, wird die Event -Handler -Funktion in der Elternansicht kontinuierlich ausgelöst, wodurch sie überwältigt wird.
Schauen wir uns dann die zweite Methode an.
2. Kommunikation zwischen Ansichten über EventBus
Ich erstelle einen globalen Objekt -Eventbus, indem ich Backbone.events erben. Injizieren Sie es in jede Unteransicht in Sendung von Ereignissen.
Der JavaScript -Code lautet wie folgt:
var ApplicationView = backbone.view.extend ({initialize: function () {this.eventbus = _.extend ({}, backbone.events); this.eventbus});},}); var documentView = backbone.view.extend ({initialize: function (options) {this.eventbus = options Funktion (Optionen) {this.eventbus = options.eventBus; this.eventbus.on ('documentEDit', this.ondocumentEdit, this);}, OndocumentEdit: function () {// reagieren Sie auf document.}});Bei dieser Methode verwende ich EventBus als globales Objekt, um Ereignisse zu registrieren. Wenn ich zwischen den Ansichten kommunizieren möchte, muss ich EventBus nur in die Ansicht einfließen und kann einfach durch sie Ereignisse auslösen oder auf Ereignisse anhören.
HINWEIS: Wenn Sie keine globalen Objekte erstellen möchten, können Sie EventBus weiterhin auf dem Modul- oder Ansichtsebene für die Kommunikation erstellen.
Diese Methode ist bereits deutlich besser als die erste Methode. Wir müssen jedoch EventBus manuell in die Unteransicht einführen, was zeigt, dass immer noch Verbesserungsraum vorhanden ist. Schauen wir uns also die dritte Methode an.
3. Verwenden Sie das Rückgrat direkt als Event -Registrierungsmaschine
In der zweiten Methode erstelle ich einen separaten Eventbus, der von Backbone.events geerbt wurde. Vor kurzem wurde mir jedoch festgestellt, dass das Backbone -Objekt selbst ein Objekt ist, das Ereignisse mischt. Daher verwende ich direkt Backbone zum Sendung von Ereignissen, sodass ich keinen weiteren Eventbus erstellen muss.
Und das Backbone -Objekt kann direkt aufgerufen werden, damit ich es nicht manuell in jede Unteransicht injizieren muss.
Der JavaScript -Code lautet wie folgt:
var ApplicationView = Backbone.view.extend ({initialize: function () {this.documentView = new documentView (); this.SideBarView = new SideBarView ();},},}, {) var documentView = backbone.view.extend ({ua) {) {{{{{Backbone.Trigger ('; Backbone.view.extend ({{initialize: function (options) {backbone.on ('documentEDit', this.onDocumentEdit, this);}, OnDocumentEdit: function () {// reagieren auf document bearbeiten.}});Zusammenfassen
Am Ende habe ich die dritte Methode in meinem Projekt verwendet. Und meiner Meinung nach ist es, obwohl es direkt auf das globale Backbone -Objekt beruht, äußerst präzise zu verwenden.