javascript - How can I "bubble up" events on nested Backbone collections? - Stack Overflow

admin管理员组

文章数量:1354771

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?

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?

• javascript
• backbone.js
• backbone-events

Share Improve this question Follow asked Apr 6, 2013 at 22:09 Chris XChris X 91133 gold badges99 silver badges1919 bronze badges 6

• trigger the event manually when you receive it – Cory Danielson Commented Apr 6, 2013 at 23:38
• @CoryDanielson I imagined that the event needed to be triggered 'manually' but it didn't work, I got RangeError: Maximum call stack size exceeded. – Chris X Commented Apr 7, 2013 at 17:06
• Are you doing something with setTimeout? That's not an error I've ever gotten before while using Backbone – Cory Danielson Commented Apr 7, 2013 at 18:22
• @CoryDanielson No, not at all! – Chris X Commented Apr 7, 2013 at 20:04
• 1 @ChrisX Usually "Maximum call stack size exceeded" is a strong indicator that you have infinite recursion going on. Could a change listener on your outer model be doing something that would trigger change on an inner model? Then the change events would loop around forever... – peterflynn Commented Dec 11, 2013 at 1:57

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 7

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/phoenecke/DvHqH/1/

本文标签： javascriptHow can I quotbubble upquot events on nested Backbone collectionsStack Overflow