CODEWITHSUNDEEP
javascriptbackbone.jsbackbone-events
underscore666
underscore666

Reputation: 1739

Backbone: how to render myView into the DOM

I hope this piece of code is enough to understand the problem.
The issue is the following,

1) I load myView for the first time,
2) If I click on div#myId, the function myAction is triggered just one time as expected.
3) If call the method remove for rendering another view, the functiom myAction is triggered two times.
4) Then if I repeat the step 3) the functiom myAction is triggered three times and so on.

What could be the problem?

var myView = Backbone.View.extend({

    // The DOM events specific to an item.
    events: {
        "click #myId" : "myAction"
    },

    myAction: function () {
        // some code
    },

    remove: function remove () 
    {
        $(this.el).html("");
    }

});

P.S.:
The DOM which is created to each render call is ok.

Upvotes: 1

Views: 108

Answers (1)

Vincent Briglia
Vincent Briglia

Reputation: 3068

usually the problem here is that you're in some state where you're re-rendering views over a pre-defined element over and over again, without properly destroying the view, resulting in 'zombie' views. If you've defined an el in your view, and keep rendering said view on it, you will end up duplicating your events.

in jQuery for an example if you do this a couple times:

$(document).bind('click',function(){ console.log("document.click"); });
$(document).bind('click',function(){ console.log("document.click"); });
$(document).bind('click',function(){ console.log("document.click"); });

it will fire the event three times.

Take a good look at how you initialize your views, and most importantly how you render/re-render them.

what you have to do in your remove method is more something along these lines

remove: function remove () 
{
    this.$el.remove();
    this.$el.unbind();
}

Upvotes: 1

Related Questions