Recreating a removed view in backbone js

backbone.js, javascript

Solution

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/

Problem

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.

Original source