Backbone reusable view (set new model to existing view)

Question

What is the best approach for the following setting: A long list if items (several hundred persons) and after clicking on a list entry a new dialog opens with item details.

There are several options (see also here):

use a "dummy" model and one view and change the attributes of the dummy models -> does not reflect changes to the original model
change the model of one already existing view
everytime a click on the list is made a new view is created which the model -> performance issues?
use the marionette framework -> there is little documentation which makes it hard to understand for me
use JSPerf View -> I tried the online demo but on fast scrolling there were several errors

I tried option 2 but there seem to be memory leakes.

ReusableView = Backbone.View.extend({
    setModel: function( model) {
        // unbind all events
        this.model.stopListening();        
        this.undelegateEvents();

        // set new model
        this.model = model;
        this.delegateEvents({
            "click": "onClicked",
            "mouseover": "onMouseOver"
        });
        this.initialize();
    }          
});

Here is a fiddle were lots of models can be created showed to the user with a single view. Type in the number of models to be created and click on create models.

Questions: Why are there memory leakes? How can I properly clean up after using a model?

For memory allocation I used chrome and its task manager. Memory consumption around 30M for 70000 views.

You can just call `this.delegateEvents()` and it will pull them in from your events hash. — Andrew, Jan 28 '14 at 18:23

score 0 · Accepted Answer · edited May 23 '17 at 12:17

This is the solution I figured out after reading and testing a lot:

setModel: function( model) {
    // unbind all view related things
    this.$el.children().removeData().unbind();
    this.$el.children().remove();
    this.stopListening();

    // clear model
    if ( this.model) {
        this.model.unbind();
        this.model.stopListening();        
    }

    // set new model and call initialize
    this.model = model;
    this.delegateEvents( this.events);    // will call undelegateEvents internally      
    this.initialize();
}

The overall view stayed the same and all children are changed.

You can find the fiddle here http://jsfiddle.net/stot/H4qPG/20/ I created 1.000.000 models and according to chrome task manager the memory consumption was stable over the loooong time of this test.

Useful information:

Backbone reusable view (set new model to existing view)

1 Answers1