Header Ads Widget

Ticker

6/recent/ticker-posts

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.

aplicación de columna vertebral

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 SidebarViewLa jerarquía de vistas es:

estructura-vista-troncal

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.

relé-evento-vista-troncal

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.

bus de eventos de vistas de backbone

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.EventsPero más tarde, supe que el Backboneobjeto en sí está mezclado con EventsEntonces, 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.

backbone-views-backbone-event-bus

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.

Publicar un comentario

0 Comentarios