Backbone.js - Marionette ItemView onDestroy() never called

Question

Im having a strange problem where the onDestroy() method of my ItemView never seems to run. I'm using Marionette v 2.2.1. Here's a very simplified version of what I've got.

myItemView.js
-------------

initialize: function() {
  console.log('ItemView init');
  var self = this;
  this.listenTo(eventsModel, 'change', function(){
    console.log('changed, lets do something');
    self.doSomething();
  });
  this.listenTo(eventsModel, 'destroy', function(){
    console.log('lets destroy ourselves');
    self.destroy();
  });
}

onDestroy: function() {
  console.log('hurray, destroyed!');
  this.stopListening();
}

doSomething: function() {
  console.log('doing something');
}


myController.js
---------------
var myView = new myItemView({model: aModel})
eventsModel.trigger('change');
eventsModel.trigger('destroy');

output:
//ItemView init
//changed, lets do something
//doing something
//lets destroy ourselves

As you can see onDestroy() never fires... what am I missing?

It is the same issue. Also views implement the onClose method. Haven't tested this, but I bet that this method also fires when you call region.close(); Afaik, you don't need to trigger an explicit destroy event via the model. — html_programmer
The destroy trigger actually represents a "close" button in the app. We have an event manager keeping track of all trigger-able events with Radio. Essentially, when the user closes it, I want to destroy everything. The regions don't seem to have a close method. I'm fairly new to backbone, but it seems like I'm in garbage collection hell. I'm not really understanding what I should/shouldn't, can/can't call destroy on... or is it close...? — gjunkie
Just for the heck of it can you add a onBeforeDestroy callback? Btw, events handled with this.listenTo are unbound automatically when the view is destroyed, see github.com/marionettejs/backbone.marionette/blob/master/docs/…. — seebiscuit

html_programmer html_programmer · Accepted Answer · 2014-12-28T01:31:06

Yes regions do have a close method:

enter image description here

Closing a view should be as simple as just closing the region, which I usually do from the controller.

I don't know if this may be helpful to you, but the way I do this, is to set up the controller as follows:

var Ctr_Test = Marionette.Controller.extend({ 

    initialize: function(options){ 
        this.region = new Marionette.Region({ el: "#some-region"}); 
        this.events(); 
    }, 

    events: function(){ 
        //Trigger any event you'd like from the view to call close(); 
        Zwoop.on("app:reset", _.bind(function(){
            this.close(); 
        }, this)); 
    }, 

    showTest: function(){ 
        this._showTest(); 
    }, 

    _showTest: function(){ 
        //Render some views in the region 
        var itemview = new Itemview(); 
        this.region.show(itemview); 

    }, 

    //Unbind all events 
    onClose: function(){ 
        Zwoop.off("app:reset"); 
        this.region.close(); 
    }

});

One attention point is to always clean up all the events that you bind in the controller, otherwise this will result in memory leaks. If you use listenTo in the view, I don't believe that you have to take care of manual cleanup, but when you use on (like my example), then it is required that you call "off" or event listeners will multiply.

Backbone.js - Marionette ItemView onDestroy() never called

1 Answers