Event management with Backbone.Marionette - Do I need to manually call stopListening for child views?

Question

I'm working inside of the Backbone.Marionette framework and I'm currently closing a Layout.

As an example, I've got something like:

var ForegroundView = Backbone.Marionette.Layout.extend({
    el: $('body'),

    events: {
        'click': function (event) {
            this.close();
        }
    },

    regions: {
        rightBasePaneRegion: '#right-base-pane-region'
    },

    initialize: function() {
        this.rightBasePaneRegion.show(new RightBasePaneView({
            model: Player
        }));
    }
});

Player is a Backbone.Model which is already defined. RightBasePaneView is a Layout and a (simplified) version of it looks akin to:

var RightBasePaneView = Backbone.Marionette.Layout.extend({

        modelEvents: {
            'change:state': function(){ console.log("Hello world."); }
        },

        //  TODO: Why do I have to do this manually? I thought Marionette handled this for me?
        onClose: function () {
            console.log("Right base pane model onClose start:", this.model._events['change:state'].length);
            this.stopListening(this.model);
            console.log("Right base pane model onClose end:", this.model._events['change:state'].length);
        }
});

Now, according to the Marionette.Layout documentation, the ForegroundView's close event will cause RightBasePaneView to close:

Closing A Layout

When you are finished with a layout, you can call the close method on it. This will ensure that all of the region managers within the layout are closed correctly, which in turn ensures all of the views shown within the regions are closed correctly.

If you are showing a layout within a parent region manager, replacing the layout with another view or another layout will close the current one, the same it will close a view.

All of this ensures that layouts and the views that they contain are cleaned up correctly.

This description of closing a layout seems to say, "Don't worry about your child views, man. It's all good." In fact, I'm experiencing a need to manually call stopListening inside of my child view layout. During closing, my console looks like:

Right base pane model onClose start: 5

Right base pane model onClose end: 4

and if I don't call stopListening then I see the events continue to stack on my model.

This doesn't seem like correct behavior to me. Is it? Advice on how to properly handle sub-view event management with Marionette?

Here's a fiddle

Dmytro Yarmak Dmytro Yarmak · Accepted Answer · 2014-03-09T09:45:47

You should not call stopListening manually. The problem is in your test suit.

If you look at Marionette.View#close you will see that onClose calls before Backbone.View#remove that calls stopListening inside.

Here's a fiddle with correct test.

Event management with Backbone.Marionette - Do I need to manually call stopListening for child views?

1 Answers