javascript - 从一个 View 触发事件到另一个 View

Question

我有两种不同的方式在我的网站上展示我的模型，当然我会用不同的 View 来处理它们。

但是，我希望能够以某种方式连接这些 View ，这样当一个事件发生在特定模型的一个 View 上时，它也可以触发另一个 View 上的事件。

为了简单起见，假设我有一个集合，并且我用生成相同 ul 列表的两个 View 表示该集合。 (在现实中，看法当然不同)。

HTML

<ul class="view-a">
    <li class="subview-a">Model 1</li>
    <li class="subview-a">Model 2</li>
</ul>

<ul class="view-b">
    <li class="subview-b">Model 1</li>
    <li class="subview-b">Model 2</li>
</ul>

Backbone

viewA = Backbone.View.extend({
    tagName: 'ul',
    className: 'view-a',
});

viewB = Backbone.View.extend({
    tagName: 'ul',
    className: 'view-b',
});

subViewA = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-a',
    events: {
         'mouseover':'over',
    },
    over: function() {
        console.log('mouse over on A');
    }
});

subViewB = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-b',
    events: {
        'mouseover':'over',
    },
    over: function() {
         console.log('mouse over on B');
    },
});

您可能会问:为什么不具有相同的 subview ？在此示例中，两个 subview 都是 li，但在实际实现中不是。

那么当悬停在 subview A 上时，如何触发 subview B 上的鼠标悬停事件，反之亦然？

Answer 1

与 Backbone 的事件模型通信。相信我，当我这样说时，但是在使用 Backbone 时，请尝试选择模块化方法。换句话说，每个 View ，即使可能相关，也不应该依赖于另一个 View 。它不仅使测试变得极其困难，还使调试成为噩梦并导致意大利面条式代码。看看this article .它解释了 View 如何使用 Backbone 的事件模型相互通信。您应该熟悉 PubSub 模式。 This question也有关系。

更新!所以如果我以你为例

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

subViewA = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-a',
    initialize: function () {
        vent.on('my-event', this.over, this);
    },
    events: {
         'mouseover':'over',
    },
    over: function(dataRecieved) {
        console.log('mouse over on A');
    }
});

subViewB = Backbone.View.extend({
    tagName: 'li',
    className: 'subview-b',
    events: {
        'mouseover':'over',
    },
    over: function() {
         vent.trigger('my-event', "data you would like to pass");
    },
});