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 1}}收藏）。

至少，我想这应该是因为模型中的一个集合被改变了所以模型被改变了（但也许我错了，我没有得到它）。

有关如何使用Backbone实现此行为的任何建议？

Answer 1

当属性通过change更改时，Backbone会触发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/

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

1 个答案: