我有一个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实现此行为的建议？
解决方法
当属性通过集合更改时,Backbone会触发更改事件.您也可以看到事件在集合上被触发.但是,您的子标签属性的值根本没有更改,它仍然是您在默认值中创建的对象.如果你使用tab.set(‘subtabs’,新的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.
});
