Repeatedly creating and destroying views in Backbone.js or Marionette.js without creating a "memory leak"
<p>I suspect that the way I am handling views in backbone.js is flawed in such a way that it is creating a "memory leak". </p>

<p>There is a view that is constantly being overwritten with another copy of itself. The new copy is linked to a different model.</p>

<p>I am creating and adding the view to it's parent view by setting the <code>el</code> option when creating the child view.</p>

<p>The strange thing that is happening is that even though a new view is being rendered over top of the old view, when I click the "button" an alert pops up for every childView that was every rendered, even though the button they were listening to should be gone, they respond to the new button.</p>

<p>I've implemented a quick fix by calling a function on the old view to stop listening to events before the new view is added. But <strong>that this problem exists at all tells me that all of the old views are hanging around</strong> and will slow the application over time if the user does not refresh the page often enough.</p>

<pre><code>var parent = new (Backbone.Marionette.ItemView.extend({
     ui:{
          child_container: '#child-container'
     },
     onRender: function(){
          // Listen to outside event
          ...
     }
     on_Outside_Event: function(new_model){
          // Quick fix prevents multiple alerts popping up for every child view when "button" is pressed
          this.child_view.destroy_view(); 

          // New child view is created and rendered on top of the one that was there before
          this.child_view = childView({
               el:    this.ui.child_container,  // &lt;-- Is this the problem?
               model: new_model
          })
          this.child_view.render();
     }
}))();

var childView = Backbone.Marionette.ItemView.extend({
     events:{
          'click button': 'on_click_button'
     },
     on_click_button: function(){

          // Alert pops up once for every view that was ever displayed.
          alert('Button clicked');  
     },
     // QUICK FIX
     destroy_view: function(){
          this.undelegateEvents();
     }

}) 
</code></pre>

<p>In case this is helpful, here is a screen shot of the actual application. A calendar of appointments is on the right. The problem child view - a view of the individual appointment that the user wants to see is on the left.</p>

<p>When I click the "Cancel appointment" button, that function gets called for every appointment that was every displayed in that area, even though I am listening to the event using: <code>events:{ 'click #cancel-button': 'on_button_click'}</code></p>

<p>None of the other buttons, interactions, and other controls have this same issue, I assume because all the others actually live views that are children of the child appointment view and not in the child appointment view itself</p>

<p><a href="https://i.stack.imgur.com/JuKTi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JuKTi.jpg" alt="enter image description here"></a></p>

<p><strong>A possible fix?</strong></p>

<p>Did a little searching around, does this fix look adequate?</p>

<p>Normally, I think the <code>removeData().unbind();</code> and <code>remove()</code> functions are called directly on <code>this.$el</code>, but this did not work here, I think because I added the child view using the <code>el</code> option when it was created (<code>el:    this.ui.child_container</code>)</p>

<pre><code>var childView = Backbone.Marionette.ItemView.extend({
     ...
     // REAL FIX
     destroy_view: function(){
          this.undelegateEvents();

          this.$el.children().removeData().unbind();
          this.$el.children().remove();
     }
</code></pre>