En el artículo anterior, le presenté su experiencia de aprendizaje de valores de aprobación entre las opiniones en la columna vertebral. Este artículo se centra en la introducción de tres formas de comunicación entre las vistas de la red troncal.
La sección más crítica para dominar un marco MVC es dominar cómo comunicarse entre varias vistas. Cuando usé Angular antes, pensé que los métodos de comunicación basados en eventos ($ ON, $ emit, $ boardcast) o métodos basados en servicios fueron muy útiles. Después de pasar a la columna vertebral, debido a la comprensión insuficiente del mecanismo de eventos de Backbone y el uso muy flexible, no se ha encontrado un buen método de comunicación. Hasta que vi este artículo, el autor usó un ejemplo simple para explicar claramente las tres formas de comunicación entre las vistas de la columna vertebral. La traducción es la siguiente:
La página web que estoy desarrollando tiene dos partes principales, a saber, documento y barra lateral.
Como se muestra en la imagen de arriba, configuré tres vistas:
ApplicationView: contiene la vista inferior como la vista más externa
DocumentView: muestra el contenido que se está editando o navegando
SideBarview - Mostrar información relacionada con el documento
DocumentView y SideBarview son subvistas de ApplicationView, por lo que la estructura de vista general se muestra en la figura a continuación:
El usuario opera en cualquier subvisión, y la otra subvisión debe cambiarse en consecuencia. Pero dado que las dos opiniones de los niños no pueden notificar directamente a la otra parte (es decir, sus ámbitos no están directamente relacionados, a diferencia de la vista principal, que puede contener los ámbitos de todas sus opiniones de hijos), necesito un mecanismo de eventos.
Después de buscar en Google y referirme a los métodos de otras personas, resumí las siguientes tres formas diferentes de comunicación.
1. Pase eventos a través de la vista de los padres
Pase eventos para sus dos vistas de niños a través de la vista principal (ApplicationView). Debido a que la vista principal contiene el alcance de todas las vistas de sus hijos, es mejor usarlo como medio para la entrega de eventos.
El código JavaScript es el siguiente:
var apolplicView = backbone.view.extend ({inicialize: function () {this.documentView = new DocumentView ({parent: this}); this.sideBarview = newBarview ({parent: this}); this.documentView.on ('editar', this.Documenteded, this);}, documentada: function (function () {) StuffThis.sideBarview.trigger ('documentedit');}}); var documentView = backbone.view.extend ({onedit: function () {this.trigger ('edit');}}); var lateBarview = backbone.view.extend ({inicialize: function () {this.on ('documentedit', this..s..AndOdit, este.onditit. esto);}, onDocumentedit: function () {// reaccionar al documento editar.}});Sin embargo, este método no es eficiente. Porque necesito agregar un controlador de eventos adicional al ApplicationView Documenteded (). Si se pasan un montón de eventos a la vista del niño, la función del controlador de eventos se activará continuamente en la vista de los padres, lo que hace que se sienta abrumado.
Entonces echemos un vistazo al segundo método.
2. Comunicación entre vistas a través de EventBus
Creo un objeto global EventBus heredando Backbone.events. Inyectarlo en cada subvisión para transmitir eventos.
El código JavaScript es el siguiente:
var applicationView = backbone.view.extend ({inicialize: function () {this.eventbus = _.extend ({}, backbone.events); this.documentView = new DocumentView ({eventBus: this.eventbus}); this.sideBarview = newBarview ({{EventBus: this.EventBus});},}); var documentView = backbone.view.extend ({inicialize: function (options) {this.eventbus = options.eventbus;}, onedit: function () {this.eventbus.trigger ('documentedit');}}; var lateBARView function (options) {this.eventbus = options.eventbus; this.eventbus.on ('documentedit', this.ondocumentedit, this);}, onDocumentedit: function () {// reaccionar a documentar editar.}});En este método, uso eventBus como un objeto global para registrar eventos. Si quiero comunicarme entre las vistas, solo necesito inyectar EventBus en la vista y puedo activar o escuchar fácilmente los eventos a través de él.
Nota: Si no desea crear objetos globales, aún puede crear EventBus en el módulo o el nivel de vista para la comunicación.
Este método ya es significativamente mejor que el primer método. Sin embargo, necesitamos introducir manualmente EventBus en la subvisión, que muestra que todavía hay margen de mejora. Así que echemos un vistazo al tercer método.
3. Use la columna vertebral directamente como la máquina de registro de eventos
En el segundo método, creo un EventBus separado heredado de Backbone.events. Pero recientemente me di cuenta de que el objeto Backbone en sí es un objeto que mezcla eventos, por lo que uso directamente la troncal para transmitir eventos, por lo que no necesito crear otro BoN EventBus.
Y el objeto Backbone se puede llamar directamente para que no tenga que inyectarlo manualmente en cada subvisión.
El código JavaScript es el siguiente:
var applicationView = backbone.view.extend ({inicialize: function () {this.documentView = new DocumentView (); this.sideBarView = new SideBarView ();},}); var documentView = backbone.view.extend ({oneDit: function () {backbone.trigger Backbone.view.extend ({inicialize: function (options) {backbone.on ('documentedit', this.ondocumentedit, this);}, onDocumentedit: function () {// reaccionar al documento editar.}});Resumir
Terminé usando el tercer método en mi proyecto. Y en mi opinión, aunque se basa directamente en el objeto global de la red troncal, es extremadamente conciso de usar.