javascript – 如何在嵌套的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实现此行为的建议？

解决方法

当属性通过集合更改时,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.
});

编辑：http://jsfiddle.net/phoenecke/DvHqH/1/

原文地址：https://www.jb51.cc/js/155018.html