处置Collection时，关闭Backbone事件

Question

I have my Collection subscribing to an event I trigger on the Backbone object itself:

const Items = BaseCollection.extend({
    model: ItemModel,

    initialize() {
        BaseCollection.prototype.initialize.apply(this, arguments);
        Backbone.on('api:data:foobar', (data) = > {

        });
    }
});

However, when I create new instances of this Collection, Backbone adds another listener. When this event is triggered, the callback is fired many many times. Is there a way to either:

1. Only set this once per Collection lifecycle?
2. Where is the best place to unsubscribe/turn off this event listener?

Answer 1

The reason this is happening is because your binding the event handler directly to the Backbone object, every time you create a new instance (which calls the initialize method of your collection).

What you want to do instead is invert the relationship and have your collection listen to the event and unsubscribe when you are disposing of your collection. Since version 0.9.9 Backbone provides a built it way to do this using the listenTo .

For example

 initialize() {
        BaseCollection.prototype.initialize.apply(this, arguments);
        this.listenTo(Backbone, 'api:data:foobar', (data) = > {

        });

To unsubscribe/turn off this event listener you can use the the stopListening method (they should also be automatically removed if you remove your collection). With views when you call remove it will automatically call stopListening .

If you really want to use bind the event handler directly to the Backbone object and bind it just once you could do this in this by moving the event binding outside of your initialize method, but you will probably be better off using listenTo.