javascript - 主干 View - 跨组件通信

Question

var BaseView = Backbone.View.extends({
});
var ComponentView = BaseView.extends({
});
var ChildView1 = ComponentView.extends({
});
var ChileView2 = ComponentView.extends({
});

我想要在 ChildView1 和 ChileView2 之间进行跨组件通信。

我希望在 parent(ComponentView) 中有一个 extend({}, Backbone.Events) 对象。

我在一些示例中看到如下所示

var ComponentView = BaseView.extends(_.extend({}, Backbone.Events, {
});

PS:我正在使用组件上存在的属性从另一个 BackboneView 初始化所有组件

Answer 1

在 Backbone 中，我更喜欢使用某种发布/订阅事件模式在 View 之间进行通信。在最简单的形式中，您的代码将如下所示:

/* Create an Event Aggregator for our Pub/Sub */
var eventAggregator = _.extend({}, Backbone.Events);

/* Pass that Event Aggregator to our Child Views */
var childView1 = new ChildView1({ "eventAggregator": eventAggregator });

/* From here we can just bind/trigger off of eventAggregator whenever we need */
eventAggregator.bind("tellChild", function(e) { alert(e.message); });
eventAggregator.trigger("tellChild", { "message": "hello" });

请注意我们如何创建一个从内置 Backbone.Events 扩展出来的新对象，并将其传递到 ChildView1 中。在 ChildView 内部或任何其他引用 eventAggregator 的地方，您可以绑定(bind)/触发新事件。然而，这只是冰山一 Angular ，因为您将需要处理不再需要了解此事件处理程序、解除绑定(bind)事件处理程序并确保不会泄漏内存的情况。

这里没有足够的空间来深入探讨这一点，因此我建议阅读有关 Backbone 中事件聚合的更多信息。我曾经使用过的所有逻辑都源自 Derick Bailey 在 blog posts 中写的作品。和他的书“Building Backbone Plugins”(都是卓越的信息来源)。这些最终来自于他创作 Marionette 的工作。 ，这是对 Backbone 的一个很好的赞美。如果您不想担心这些问题或者只是想要一个更简单的 API，我建议使用 Marionette或类似的东西来提高你的主干 View 。