Question

我有两种不同的方式在我的网站上显示我的模型，当然我用不同的视图处理它们。

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

为了简单起见，假设我有一个集合，我用两个视图表示集合，生成相同的ul列表。（实际上，观点当然不同）。

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>

骨干

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');
    },
});

您可能会问：为什么不使用相同的子视图？在此示例中，两个子视图都是li，但在实际实现中却没有。

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

Answer 1

与Backbone的活动模型沟通。当我说这个时相信我，但是当使用Backbone时，请尝试选择模块化方法。换句话说，即使可能相关，每个视图也不应该依赖于另一个视图。它不仅使测试变得非常困难，而且还使调试成为一个噩梦，并导致意大利面条代码。看看this article。它解释了视图如何使用Backbone的事件模型与彼此进行通信。您应该熟悉PubSub模式。 This question也是相关的。

UPDATE！所以如果我举个例子

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");
    },
});

触发事件从一个视图到另一个视图

1 个答案: