觸發從一個視圖到另一個視圖的事件

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