backbone.js - 如何在视图之间进行通信？

Question

我有一个单页Web应用程序,其中包含多个backbone.js视图.这些观点有时必须相互沟通.两个例子:

1. 当有两种方式同时以不同方式呈现集合时,必须将一个视图中的项目单击转发到另一个视图.
2. 当用户转换到进程的下一个阶段并且第一个视图将数据传递给第二个阶段时.

为了尽可能地分离视图,我目前使用自定义事件来传递data($(document).trigger('customEvent', data)).有一个更好的方法吗？

Answer 1

一种广泛使用的技术是扩展Backbone.Events-object以创建您的个人全局事件聚合器.

var vent = {}; // or App.vent depending how you want to do this
_.extend(vent, Backbone.Events);

根据您是否使用requirejs或其他内容,您可能希望将其分隔为自己的模块或将其作为Application对象的属性.现在,您可以在应用中的任何位置触发和收听事件.

// View1
vent.trigger('some_event', data1, data2, data3, ...);

// View2
vent.on('some_event', this.reaction_to_some_event);

这也允许您使用事件聚合器在模型,集合,路由器等之间进行通信.这是Martin Fowler对事件聚合器的概念(不是在javascript中).这是一个更多的backboney实现,并在Backbone.Marionette的脉络中更多地反思这个主题,但大部分都适用于vanilla Backbone.

希望这有帮助!

Answer 2

我在第一部分同意@jakee

var vent = {}; 
_.extend(vent, Backbone.Events);

但是,使用"on"监听全局事件可能会导致内存泄漏和僵尸视图问题,并且还会导致多个操作处理程序调用等.

您应该在视图中使用"listenTo"而不是"on"

 this.listenTo(vent, "someEvent", yourHandlerFunction);

因此,当您删除视图时view.remove(),此处理程序也将被删除,因为处理程序绑定到您的视图.

触发全局事件时,只需使用

vent.trigger("someEvent",parameters);