How do I destroy this Backbone.js View instance?

Question

var CheckboxView = Backbone.View.extend({
        tagName:'div',
        template: _.template(item_temp,{}),
        events:{
            'click .checkoff_friend':'toggleCheckFriend',
        },
        initialize: function(){
        },
        render:function(){

        },
        toggleCheckFriend:function(){
            //destroy this View instance. 
        }
    });

var cv = new CheckboxView();

How do I destroy the instance? When toggle is activated, I want the instance of that view to dissapear forever.

score 6 · Answer 1 · edited May 23 '17 at 12:23

My answer for a similar question was received well, and has worked well for me. Here's a look at my destroy_view function

(orig. question https://stackoverflow.com/a/11534056/986832) Response:

I had to be absolutely sure the view was not just removed from DOM but also completely unbound from events.

destroy_view: function() {

    //COMPLETELY UNBIND THE VIEW
    this.undelegateEvents();

    $(this.el).removeData().unbind(); 

    //Remove view from DOM
    this.remove();  
    Backbone.View.prototype.remove.call(this);

    }

Seemed like overkill to me, but other approaches did not completely do the trick.

score 3 · Answer 2 · answered Dec 04 '11 at 23:04

Do not assign the instance to any variable (I don't see any need to since Views in backbone are driven by events), and in your toggleCheckFriend method remove all data and events, which makes the instance available for garbage collection.

    toggleCheckFriend:function(){
    $(this.el).removeData().unbind();

    }

score 0 · Answer 3 · answered Dec 05 '11 at 03:37

0

Does that View have a model behind it?

If you want the model removed (from the db), you can use: this.model.destroy()

After that, you can remove just the View itself from the DOM by calling this.remove(). Documentation mentions that it is the equivalent of $(this.el).remove().

Note that the 'this' above refers to the View itself, so you would have to _.bindAll(this, 'toggleCheckFriend')

answered Dec 05 '11 at 03:37

rkw

7,287
4
26
39

You don't need _.bindAll(this, 'toggleCheckFriend'). The context for DOM event callbacks will automatically be the view. – Johnny Oshika Dec 05 '11 at 08:27
@JohnnyO: I mainly have that in there for piping commands. Just in case there are elements that can trigger it besides the user directly triggering it. (i.e. the page has a CheckAllCheckBox) – rkw Dec 05 '11 at 18:30

How do I destroy this Backbone.js View instance?

3 Answers3