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

我有一个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实现此行为的建议？

来源

2013-04-06 Chris X

手动触发事件，当你收到它 –

@CoryDanielson我想到的是，需要时要“手动”触发，但它没有工作，我得到了_RangeError：最大调用堆栈大小超过_。 –

你在用setTimeout做些什么吗？这不是我在使用Backbone之前得到的错误 –

A change当属性通过set更改时，由Backbone触发事件。正如您所看到的那样，该事件也会在集合上触发。但是，您的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-06 23:19:34

根据您的答案和您的代码的一些更改，我设法触发模型上的原始“变更”事件。 on（'change'，this.subtabsChanged，this）;'我得到一个错误_RangeError：超出了最大调用堆栈大小__（'change'，this.subtabsChanged，this）;' 。所以，这是关键。 –

这个.subtabsChanged做了什么？ –

@CoryDanielson在子选项卡子集合中的某些内容发生变化时触发Tab上的事件... –

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

回答

相关问题