Question

The View.remove() function in backbone js removes the container element of the view itself from the DOM preventing from recreating views that have been removed. Any idea how this scenario is handled

Here is my code,

var AttributeView = Backbone.View.extend({
        el: $("#attrs"),
        template:_.template($('#attrs-template').html()),

        initialize:function() {
        },


        render:function (eventName) {
            $(this.el).html(this.template(this.model.toJSON()));
            return this;
            },

        dispose:function(eventName){
            this.unbind();
            this.remove();
        },

    });


var attrView = new AttributeView();
....
attrView.dispose();
//Later on some event I do the below
attrView = new AttributeView()
attrView.render();

The last two lines above do not recreate the view as the div with id=”attrs” is not longer there.

Answer 1

First of all, you don’t need your dispose method, the standard remove is sufficient:

var attrView = new AttributeView();
//....
attrView.remove();  // <--------- Do this instead
//...
attrView = new AttributeView()
attrView.render();

Secondly, you can override remove if the standard version doesn’t do what you need. The default implementation simply removes this.el and cleans up some event listeners:

remove: function() {
  this.$el.remove();
  this.stopListening();
  return this;
},

In your case, you want to undo everything that render does and that means clearing out the HTML inside this.el and removing the events by calling undelegateEvents:

remove: function() {
    this.undelegateEvents();
    this.$el.empty();
    this.stopListening();
    return this;
},

Then you can call attrView.remove() and kill it off and (new AttributeView()).render() to bring it back.

Demo: http://jsfiddle.net/ambiguous/Pu9a2/3/