Repeatedly creating and destroying views in Backbone.js or Marionette.js, without creating a "memory leak",

I suspect that the way views are handled in backbone.js is wrong in such a way that it creates a "memory leak".

There is a representation that is constantly being rewritten by another copy. The new copy is associated with another model.

I create and add a view to it as a parent view by setting a parameter elwhen creating a child view.

The strange thing that happens is that even if the new view is rendered on top of the old view, when I click the button button, a pop-up warning appears for every child that was displayed every time, although the button was listened, they should go away, they answer the new button.

I took advantage of a quick fix by calling a function on the old view to stop listening to events until a new view was added. But , that this problem exists at all, tells me that all old views hang around and will slow down the application over time if the user does not refresh the page often enough.

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,  // <-- 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();
     }

}) 

, , . - . - , , .

" ", , , , : events:{ 'click #cancel-button': 'on_button_click'}

, , , , , .

enter image description here

?

, ?

, , removeData().unbind(); remove() this.$el, , , , el, (el: this.ui.child_container)

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

          this.$el.children().removeData().unbind();
          this.$el.children().remove();
     }
+4
1

, LayoutView ( ItemView iirc), , , , :

  Parent = Backbone.Marionette.LayoutView.extend
    regions:
      child: "#child-container"

    on_Outside_Event: ->
      childView = new ChildView(...)
      @getRegion("child").show(childView)

(, coffeescript, , ).

Marionette : , ..

+2

Source: https://habr.com/ru/post/1627197/


All Articles