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

Question

我有一个使用嵌套集合的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实现此行为的任何建议？

Answer 1

一个change事件是通过骨干当一个属性通过改变触发set.如您所见,该事件也会在集合中触发.但是,您的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/