如何在嵌套的Backbone集合上「冒泡」事件？

我有一個Backbone應用程序，它使用嵌套集合（至少這是我認爲他們被稱爲的方式）。如何在嵌套的Backbone集合上「冒泡」事件？

在我的具體情況有標籤和子選項卡，每個選項卡（模型）包含子選項卡（模型）的集合。

對於那些誰是更熟悉的代碼，我會寫我的吼叫模型和收藏品，以及如何子選項卡嵌套的標籤模型內部：

// Subtab Model 
var Subtab = Backbone.Model.extend({ 
    defaults: { label: undefined } 
}); 

// Subtabs Collection 
var Subtabs = Backbone.Collection.extend({ 
    model: Subtab 
}); 

// Tab Model 
var Tab = Backbone.Model.extend({ 
    defaults: { label: undefined, subtabs: new Subtabs} 
}); 

// Tabs Collection 
var Tabs = Backbone.Collection.extend({ 
    model: Tab 
});

現在，當我更改選項卡的屬性，它觸發Tab模型和Tabs集合上的更改事件（非常正常，對嗎？），但是當我更改子選項卡的屬性時，會觸發Subtab模型和Subtabs集合（這也是正常的）的更改事件但它不會冒泡到Tab模型（和Tabs集合）。

至少，我想這應該是因爲模型中的集合發生了變化，所以模型被改變了（但也許我錯了，但我沒有得到它）。

任何有關如何使用Backbone實現此行爲的建議？

來源

2013-04-06 Chris X

手動觸發事件，當你收到它 –

@CoryDanielson我想到的是，需要時要「手動」觸發，但它沒有工作，我得到了_RangeError：最大調用堆棧大小超過_。 –

你在用setTimeout做些什麼嗎？這不是我在使用Backbone之前得到的錯誤 –

A change當屬性通過set更改時，由Backbone觸發事件。正如您所看到的那樣，該事件也會在集合上觸發。但是，您的subtabs屬性的值完全沒有改變，它仍然是您在defaults中創建的同一個對象。如果你使用tab.set('subtabs', new Subtabs);，你會得到一個change:subtabs事件，但你不想這樣做。

我認爲你將不得不在你的代碼中做一些事情來觸發你的Tab模型上的新事件。

// Tab Model 
var Tab = Backbone.Model.extend({ 
    defaults: { label: undefined, subtabs: new Subtabs}, 
    initialize: function(){ 
     // listen for change in subtabs collection. 
     this.get('subtabs').on('change', this.subtabsChanged, this); 
    }, 
    subtabsChanged: function(model) { 
     // trigger new event. 
     this.trigger('subtab:change', this, model); 
    } 
});

然後，你可以爲事件監聽：

tabs.on('subtab:change', function(tab, subtab) { 
    console.log(tab.get('label')); 
    console.log(subtab.get('label')); 
});

這會的工作，我想。但我想我很想知道爲什麼你會聽你的Tabs集合中的變化在Subtabs中。在大多數情況下，只需在您的Subtabs集合本身上收聽更改事件可能會更好。

tab.get('subtabs').on('change', function(model){ 
    // do something with model, which is a Subtab. 
});

編輯：http://jsfiddle.net/phoenecke/DvHqH/1/

來源

2013-04-06 23:19:34

根據您的答案和您的代碼的一些更改，我設法觸發模型上的原始「變更」事件。 on（'change'，this.subtabsChanged，this）;'我得到一個錯誤_RangeError：超出了最大調用堆棧大小__（'change'，this.subtabsChanged，this）;' 。所以，這是關鍵。 –

這個.subtabsChanged做了什麼？ –

@CoryDanielson在子選項卡子集合中的某些內容發生變化時觸發Tab上的事件... –

如何在嵌套的Backbone集合上「冒泡」事件？

回答

相關問題