No artigo anterior, apresentei você à sua experiência de aprendizado de aprovar valores entre as visões no backbone. Este artigo se concentra na introdução de três maneiras de comunicação entre as visualizações de backbone.
A seção mais crítica para dominar uma estrutura MVC é dominar como se comunicar entre várias visões. Quando usei o Angular antes, pensei que os métodos de comunicação baseados em eventos ($ on, $ emit, $ boardcast) ou métodos baseados em serviços eram muito úteis. Depois de se mudar para a espinha dorsal, devido ao entendimento insuficiente do mecanismo de eventos da backbone e do uso muito flexível, um bom método de comunicação não foi encontrado. Até que eu vi este artigo, o autor usou um exemplo simples para explicar claramente as três maneiras de comunicação entre as vistas da espinha dorsal. A tradução é a seguinte:
A página da web que estou desenvolvendo tem duas partes principais, a saber, documentar e barra lateral.
Como mostrado na imagem acima, configurei três visualizações:
ApplicationView - contém a visão inferior como a visão mais externa
DocumentView - mostra o conteúdo que está sendo editado ou navegado
SideBarview - mostre algumas informações relacionadas a documentos
DocumentView e SideBarView são subviews do ApplicationView, portanto a estrutura geral da visualização é mostrada na figura abaixo:
O usuário opera em qualquer subview e a outra subview precisa ser alterada de acordo. Mas como as duas visões de crianças não podem notificar diretamente a outra parte (ou seja, seus escopos não estão diretamente relacionados, diferentemente da visualização dos pais, que pode conter os escopos de todas as suas visões de crianças), preciso de um mecanismo de eventos.
Depois de pesquisar no Google e me referindo aos métodos de outras pessoas, resumi as três maneiras de comunicação diferentes.
1. Passe os eventos através da visão dos pais
Passo eventos para suas duas visões de crianças através da visualização pai (ApplicationView). Como a visualização pai contém o escopo de todas as suas opiniões para a criança, é melhor usá -la como um meio para entrega de eventos.
O código JavaScript é o seguinte:
var ApplicationView = backbone.view.extend ({Initialize: function () {this.documentView = new DocumentView ({parent: this}); this.sideBarview = newBarView ({parent: this}); this.document.on ('edit', this.documentededededed (this); stuffThis.sideBarView.Trigger ('DocumentEdit');}}); var documentView = backbone.view.extend ({onedit: function () {this.Trigger ('edit');}}); varview = backbone.viet.ext ({inicialize: function () {); Este);}, ondocumentEdit: function () {// reage ao documento edit.}});No entanto, esse método não é eficiente. Porque preciso adicionar um manipulador de eventos extra ao ApplicationView DocumentEdited (). Se um monte de eventos forem aprovados na visualização da criança, a função de manipulador de eventos será acionada continuamente na visualização dos pais, fazendo com que ela fique sobrecarregada.
Então vamos dar uma olhada no segundo método.
2. Comunicação entre as visualizações através do Eventbus
Eu crio um objeto global Eventbus herdando backbone.events. Injete -o em cada subview para transmitir eventos.
O código JavaScript é o seguinte:
var ApplicationView = backbone.view.extend ({Initialize: function () {this.eventbus = _.extend ({}, backbone.events); this.documentView = new DocumentView ({} EventBus: this.eventbus}); Backbone.view.extend ({Initialize: function (options) {this.eventbus = options.eventbus;}, onedit: function () {this.eventbus.trigger ('documentit');}}); var sideBarview = backbone.Enviend.Extend ({Initialize: function) {options; options.eventbus; this.eventbus.on ('documedit', this.ondocumentEdit, this);}, ondocumentEdit: function () {// reaja ao documento edit.}});Neste método, uso o EventBus como um objeto global para registrar eventos. Se eu quiser me comunicar entre as visões, só preciso injetar o EventBus na vista e posso acionar ou ouvir facilmente os eventos através dela.
NOTA: Se você não deseja criar objetos globais, ainda poderá criar o EventBus no módulo ou o nível de visualização para comunicação.
Este método já é significativamente melhor que o primeiro método. No entanto, precisamos introduzir manualmente o Eventbus na subview, que mostra que ainda há espaço para melhorias. Então, vamos dar uma olhada no terceiro método.
3. Use Backbone diretamente como a máquina de registro de eventos
No segundo método, crio um Eventbus separado herdado do backbone.events. Mas recentemente percebi que o próprio objeto de backbone é um objeto que mistura eventos, por isso uso diretamente o backbone para transmitir eventos, por isso não preciso criar outro EventBus.
E o objeto de backbone pode ser chamado diretamente para que eu não precise injetar manualmente em cada subview.
O código JavaScript é o seguinte:
var ApplicationView = Backbone.View.Extend ({Initialize: function () {this.documentView = new DocumentView (); this.sideBarview = new SideBarView ();},}); var documentView = backbone.View.extend ({onedit: function () {backbone.Trigger ('DocumentitIt'; Backbone.view.extend ({Initialize: function (options) {backbone.on ('documedit', this.ondocumentEdit, this);}, ondocumentEdit: function () {// reaja ao documento edit.}});Resumir
Acabei usando o terceiro método no meu projeto. E, na minha opinião, embora dependa diretamente do objeto global de backbone, é extremamente conciso de usar.