怎样才能“冒泡"?嵌套的 Backbone 集合上的事件? [英] How can I "bubble up" events on nested Backbone collections?

问题描述

我有一个使用嵌套集合的 Backbone 应用(至少我认为它们是这么叫的).

在我的特殊情况下有标签和子标签，每个标签(模型)都包含一个子标签(模型)的集合.

对于那些更熟悉代码的人，我将在下面编写我的模型和集合，以及子选项卡如何嵌套在选项卡模型中:

//子标签模型var Subtab = Backbone.Model.extend({默认值:{标签:未定义}});//子标签集合var Subtabs = Backbone.Collection.extend({型号:子标签});//标签模型var Tab = Backbone.Model.extend({默认值:{ 标签:未定义，子标签:新子标签}});//标签集合var Tabs = Backbone.Collection.extend({型号:标签});

现在，当我更改选项卡的属性时，它会在 Tab 模型和 Tabs 集合上触发更改事件(很正常，对吧?)，但是当我更改了子选项卡的属性，它会在 Subtab 模型和 Subtabs 集合上触发更改事件(这也是正常的)但它不会冒泡到Tab 模型(以及 Tabs 集合).

至少，我想应该是因为模型中的一个集合发生了变化，因此模型也发生了变化(但也许我错了，我没有理解).

关于如何使用 Backbone 实现这种行为的任何建议?

解决方案

当通过 set 更改属性时，Backbone 会触发 change 事件.如您所见，该事件也会在集合上触发.但是，您的 subtabs 属性的值根本没有改变，它仍然是您在 defaults 中创建的同一个对象.如果你使用了 tab.set('subtabs', new Subtabs); 你会得到一个 change:subtabs 事件，但你不想那样做.>

我认为您必须在代码中执行某些操作才能在 Tab 模型上触​​发新事件.

//标签模型var Tab = Backbone.Model.extend({默认值:{标签:未定义，子标签:新子标签}，初始化:函数(){//监听子选项卡集合的变化.this.get('subtabs').on('change', this.subtabsChanged, this);},subtabsChanged:功能(模型){//触发新事件.this.trigger('subtab:change', this, 模型);}});

然后你可以监听事件:

tabs.on('subtab:change', function(tab, subtab) {console.log(tab.get('label'));console.log(subtab.get('label'));});

我认为这会奏效.但我想我想知道为什么你会听你的标签集合来改变子标签.在大多数情况下，最好只在您的 Subtabs 集合本身上监听更改事件.

tab.get('subtabs').on('change', function(model){//对模型做一些事情，这是一个子选项卡.});

http://jsfiddle.net/phoenecke/DvHqH/1/

I have a Backbone app that uses nested collections (at least that's how I think they're called).

In my particular case there are tabs and subtabs, and each tab (model) contains a collection of subtab (model).

For those who're more familiar with code, I'll write bellow my models and collections, and how subtabs are nested inside the tab model:

// 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
});

Now, when I change a tab's attribute it fires the change event on the Tab model and also on the Tabs collection (quite normal, right?), but when I change a subtab's attribute, it fires the change event on the Subtab model and Subtabs collection (this is also normal) but it doesn't bubble up to the Tab model (and to the Tabs collection).

At least, I guess it should because a collection inside a model was changed and so the model was changed (but maybe I'm wrong and I'm not getting it).

Any suggestion on how can I achieve this behavior with Backbone?

解决方案

A change event is triggered by Backbone when an attribute changes via set. The event is then also triggered on the collection, as you have seen. But, the value of your subtabs attribute is not changing at all, it is still the same object you created in defaults. If you used tab.set('subtabs', new Subtabs); you would get a change:subtabs event, but you don't want to do that.

I think you would have to do something in your code to trigger a new event on your Tab model.

// 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);
    }
});

Then you could listen for the event:

tabs.on('subtab:change', function(tab, subtab) { 
    console.log(tab.get('label'));
    console.log(subtab.get('label'));
});

This will work, I think. But I guess I am wondering why you would listen to your Tabs collection for a change in the Subtabs. In most cases, it might be better to just listen for the change event on your Subtabs collection itself.

tab.get('subtabs').on('change', function(model){
    // do something with model, which is a Subtab.
});

EDIT: http://jsfiddle.net/phoenecke/DvHqH/1/

这篇关于怎样才能“冒泡"?嵌套的 Backbone 集合上的事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！