CODEWITHSUNDEEP
javascriptbackbone.js
mzafer
mzafer

Reputation: 851

Recreating a removed view in backbone js

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.

Upvotes: 8

Views: 4529

Answers (2)

mu is too short
mu is too short

Reputation: 434585

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/

Upvotes: 21

Ustaman Sangat
Ustaman Sangat

Reputation: 1543

Take a look at LayoutManager for Backbone Views, which understands that when you remove a view (parent - in the containment sense and not object-hierarchy sense), its subViews should also be removed.

Upvotes: 0

Related Questions