主干视图-跨组件通信

Backbone view - Cross component communication

本文关键字：组件 通信 视图      更新时间：2023-09-26
var BaseView = Backbone.View.extends({
});
var ComponentView = BaseView.extends({
});
var ChildView1 = ComponentView.extends({
});
var ChileView2 = ComponentView.extends({
});

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

我想在parent(ComponentView)中有a _.extend({}, Backbone.Events)对象。

我在

下面看到了一些例子
var ComponentView = BaseView.extends(_.extend({}, Backbone.Events, {
});

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

在Backbone中，我更喜欢使用某种发布/订阅事件模式在视图之间进行通信。在最简单的形式中，您的代码看起来像下面这样:

/* 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引用的地方，你可以绑定/触发新事件。然而，这只是冰山一角，因为您将需要处理不再需要知道这个事件处理程序，取消绑定事件处理程序并确保您不会泄漏内存。

这里没有足够的空间来深入讨论这个问题，所以我建议阅读更多关于Backbone中的事件聚合的内容。我曾经使用过的所有逻辑都来自德里克·贝利在博客文章和他的书"构建主干插件"中所写的工作(两者都是优秀的信息来源)。这些最终来自于他创造《木偶》的工作，这是对Backbone的一个很好的赞美。如果你不想担心这些问题，或者只是想要一个更简单的API，我建议使用木偶或类似的东西来改进你的骨干视图。

相关文章：