1

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

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

为简单起见，假设我有一个集合，并且我用两个生成相同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时触发 mouseover 事件subview A，反之亦然？

4

1 回答 1

2

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

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

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");
    },
});
于 2012-06-28T14:47:01.937 回答