Dans l'article précédent, je vous ai présenté votre expérience d'apprentissage de la transmission des valeurs entre les vues dans l'épine dorsale. Cet article se concentre sur l'introduction de trois façons de communication entre les vues de l'épine dorsale.
La section la plus critique pour maîtriser un cadre MVC est de maîtriser comment communiquer entre diverses vues. Lorsque j'ai déjà utilisé Angular, je pensais que les méthodes de communication basées sur des événements ($ on, $ émit, $ bowncast) ou les méthodes basées sur le service étaient très utiles. Après avoir déménagé à l'épine dorsale, en raison d'une compréhension insuffisante du mécanisme d'événement de l'épine dorsale et d'une utilisation très flexible, une bonne méthode de communication n'a pas été trouvée. Jusqu'à ce que je vois cet article, l'auteur a utilisé un exemple simple pour expliquer clairement les trois façons de communication entre les vues de l'épine dorsale. La traduction est la suivante:
La page Web que je développe a deux pièces principales, à savoir le document et la barre latérale.
Comme indiqué dans l'image ci-dessus, j'ai mis en place trois vues:
ApplicationView - contient la vue inférieure comme la vue la plus externe
DocumentView - affiche le contenu en cours de modification ou de navigation
SidebarView - Afficher certaines informations liées au document
DocumentView et SidebarView sont des sous-vues d'ApplicationView, de sorte que la structure de vue globale est indiquée dans la figure ci-dessous:
L'utilisateur fonctionne dans n'importe quelle sous-vue et l'autre sous-vue doit être modifiée en conséquence. Mais comme les deux vues sur les enfants ne peuvent pas informer directement l'autre partie (c'est-à-dire que leurs portées ne sont pas directement liées, contrairement à la vue parent, qui peut contenir les lunettes de toutes ses vues sur l'enfant), j'ai besoin d'un mécanisme d'événement.
Après avoir googlé et fait référence aux méthodes des autres, j'ai résumé les trois façons de communication suivantes suivantes.
1. Passez les événements par vue parent
Je passe des événements pour ses deux vues d'enfant via la vue parent (applicationView). Étant donné que la vue parent contient la portée de toutes ses vues sur l'enfant, il est préférable de l'utiliser comme support pour la livraison d'événements.
Le code JavaScript est le suivant:
var applicationView = backbone.view.extend ({initialize: function () {this.DocumentView = new DocumentView ({parent: this}); this.sidebarview = new SidebarView ({parent: this}); this.DocumentView.on ('edit', this.DocumentedEdEd 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.ondoceDit, fonction () {this.on ('documentedit', this.ondoceDit,. this);}, onDocumenteDit: function () {// réagir à l'édition de document.}});Cependant, cette méthode n'est pas efficace. Parce que j'ai besoin d'ajouter un gestionnaire d'événements supplémentaire à ApplicationView Docutés (). Si un tas d'événements sont passés dans la vue de l'enfant, la fonction du gestionnaire d'événements sera déclenchée en permanence dans la vue parent, ce qui la rend dépassée.
Voyons ensuite la deuxième méthode.
2. Communication entre les vues via Eventbus
Je crée un objet global Eventbus en héritant de dorsal. EVENTS. Injectez-le dans chaque sous-vue pour diffuser des événements.
Le code JavaScript est le suivant:
var applicationView = Backbone.View.Extend ({initialize: function () {this.eventbus = _.Extend ({}, dackbone.events); this.DocumentView = new DocumentView ({eventBus: this.eventbus}); this.sidebarView = new SideBarView ({eventbus: this.eventbus});},}}); Backbone.View.Extend ({initialize: function (options) {this.eventbus = options.eventBus;}, Onedit: function () {this.eventbus.trigger ('documentEdit');}}); var Sidebarview = backbone.view.extend ({initialise: function (options) {this.eventbus = options.eventBus; this.eventbus.on ('documentEdit', this.ondocumenteDit, this);}, ondocumenteDit: function () {// réagir au document edit.}});Dans cette méthode, j'utilise EventBus comme objet global pour enregistrer les événements. Si je veux communiquer entre les vues, j'ai juste besoin d'injecter Eventbus dans la vue et je peux facilement déclencher ou écouter les événements à travers.
Remarque: Si vous ne souhaitez pas créer d'objets globaux, vous pouvez toujours créer EventBus au niveau du module ou de la vue pour la communication.
Cette méthode est déjà nettement meilleure que la première méthode. Cependant, nous devons introduire manuellement EventBus dans la sous-vue, ce qui montre qu'il y a encore place à l'amélioration. Jetons donc un coup d'œil à la troisième méthode.
3. Utilisez la colonne vertébrale directement comme machine d'enregistrement des événements
Dans la deuxième méthode, je crée un événement séparé hérité de Backbone.EVENTS. Mais récemment, j'ai réalisé que l'objet Backbone lui-même est un objet qui mélange les événements, donc j'utilise directement la colonne vertébrale pour diffuser des événements, donc je n'ai pas besoin de créer un autre EventBus.
Et l'objet de l'épine dorsale peut être appelé directement, donc je n'ai pas à l'injecter manuellement dans chaque sous-vue.
Le code JavaScript est le suivant:
var applicationView = Backbone.View.Extend ({initialize: function () {this.DocumentView = new DocumentView (); this.sidebarView = new SideBarView ();},}); var documentView = Backbone.View.Extend ({onDedit: function () {backbone.trigger ('documentEdit');}}); Backbone.View.Extend ({initialize: function (Options) {Backbone.on ('documentEdit', this.ondocumentDid, this);}, ondocumentedit: function () {// react to Document Edit.}});Résumer
J'ai fini par utiliser la troisième méthode de mon projet. Et à mon avis, bien qu'il repose directement sur l'objet Global Backbone, il est extrêmement concis à utiliser.