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

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 A上徘徊时触发subview B上的鼠标悬停事件，反之亦然？

Answer 1

与Backbone的事件模型进行通信。当我说这些时相信我，但是在使用Backbone时，请尝试选择模块化方法。换言之，即使可能有关，每个观点都不应该依赖于另一种观点。它不仅使测试变得非常困难，而且也使其成为调试和导致意大利面代码的噩梦。看看this article。它解释了视图如何使用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"); 
    }, 
});