Comunicación entre vistas en Backbone

La aplicación troncal en la que estoy trabajando actualmente tiene una sección de documento y una sección de barra lateral.

Para representar la estructura anterior en Backbone, se me ocurrieron las siguientes vistas.

1. ApplicationView - el contenedor de las sub vistas.
2. DocumentView - representa un documento actual que se está editando / visualizando.
3. SidebarView : Muestra información relevante para el documento que se encuentra en DocumentView.

Mi nivel superior ApplicationViewcontiene referencias tanto a las vistas de los niños DocumentViewcomo a SidebarView. La jerarquía de vistas es:

Ahora, cuando hay alguna interacción del usuario en una de las vistas secundarias, necesito comunicar ese evento a la otra vista secundaria. Dado que las vistas secundarias no se conocen entre sí (en otras palabras, no tienen referencias entre sí, a diferencia de la vista principal que contiene referencias a todas sus vistas secundarias), necesito depender de algún mecanismo de eventos.

Después de buscar en Google y leer las opiniones de otras personas, a continuación se muestran los tres enfoques diferentes que consideré para lograr esto.

1. Uso de la vista principal como transmisión de eventos

En el primer enfoque, utilicé el padre ApplicationViewpara transmitir los eventos entre sus vistas secundarias. Dado que la vista principal hace referencia a todas sus vistas secundarias, es fácil transmitir el evento a través de la principal.

El código JavaScript será:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

var ApplicationView = Backbone.View.extend({     initialize : function(){     this.documentView = new DocumentView({parent:this});     this.sidebarView = new SidebarView({parent:this});       this.documentView.on('edit', this.documentEdited, this);   },     documentEdited : function(){     // do some stuff     this.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(){     // react to document edit.   }   });

Pero este enfoque no es tan efectivo en la realidad. Porque tuve que introducir un método de controlador de eventos adicional documentEdited()en el ApplicationViewsolo para pasar los eventos. Cuando hay varios eventos que necesito pasar, entonces se convertirá en una pesadilla agregar controladores de eventos para todos esos eventos en la vista principal.

Entonces, miré el segundo enfoque.

2. Usar un EventBus para comunicarse entre vistas

En este enfoque, extendí el Backbone.Eventsobjeto y creé un EventBusobjeto. Luego inyecté esto EventBusa todas las vistas secundarias que luego solían propagar eventos.

El código JavaScript para este appraoch será:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var ApplicationView = Backbone.View.extend({     initialize : function(){       this.eventBus = _.extend({}, Backbone.Events);       this.documentView = new DocumentView({       eventBus : this.eventBus     });     this.sidebarView = new SidebarView({       eventBus : this.eventBus     });     },   });   var DocumentView = Backbone.View.extend({     initialize : function(options){     this.eventBus = options.eventBus;   },     onEdit : function(){     this.eventBus.trigger('documentEdit');   }   });   var SidebarView = Backbone.View.extend({     initialize : function(options){     this.eventBus = options.eventBus;     this.eventBus.on('documentEdit', this.onDocumentEdit, this);   },     onDocumentEdit : function(){     // react to document edit.   }   });

En este enfoque, estoy usando el EventBusobjeto como un registro de eventos global. Si quiero que las vistas se hablen entre sí, solo inyecto lo común EventBusen ambas y luego disparo eventos / escucho eventos usando te EventBus.

Nota : Si no desea un registro de eventos global, aún puede crear buses de eventos de nivel de módulo / vista y compartirlos entre módulos / vistas secundarios.

Este enfoque es mucho mejor que el primer enfoque. Pero tenemos que inyectar manualmente las EventBusvistas a cada niño. Entonces, hay margen de mejora aquí. De ahí el tercer enfoque.

3. Uso de Backbone como bus de eventos

En el segundo enfoque, creé un objeto de bus de eventos separado, extendiendo Backbone.Events. Pero más tarde, supe que el Backboneobjeto en sí está mezclado con Events. Entonces, si uso Backbonepara propagar eventos, puedo evitar crear un bus de eventos más.

Como ventaja adicional, no necesito inyectar manualmente Backboneen todas y cada una de las sub vistas, ya que ya están disponibles.

La implementación de JavaScript será:

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 dieciséis 17 18 19 20 21 22 23 24 25 26 27 28

var ApplicationView = Backbone.View.extend({     initialize : function(){     this.documentView = new DocumentView();     this.sidebarView = new SidebarView();   },   });   var DocumentView = Backbone.View.extend({     onEdit : function(){     Backbone.trigger('documentEdit');   }   });   var SidebarView = Backbone.View.extend({     initialize : function(options){     Backbone.on('documentEdit', this.onDocumentEdit, this);   },     onDocumentEdit : function(){     // react to document edit.   }   });

Conclusión

Por ahora, estoy usando el tercer enfoque, que usa el objeto Backbone como bus de eventos, en mi proyecto. En mi opinión, este enfoque es algo más limpio que los otros dos ( Backboneaunque todavía se basa en el objeto global , pero está bien en mi caso).

Entonces, ¿qué enfoque usarías en tu proyecto? No dude en compartir si está siguiendo enfoques mejores que estos para comunicarse entre las vistas de la red troncal.