11

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

4

1 回答 1

7

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/

于 2013-04-06T23:19:34.620 回答