Backbone.js Click event firing multiple times

337 views Asked by At

Is there any forum/Issue tracking website for backbone.js ?

I have an Issue that click event triggers multiple times. I had found a work around using Underscore.js , debounce method.

Is the problem addressed in latest backbone.js ?

Please suggest me on this .

Raja K

define([
'jquery', 'underscore','backbone',], function($, _, Backbone,Marionette) {

 var Sample = Backbone.Marionette.ItemView.extend({

    template: 'sample/sample',

    model : new Model(),

    render: function() {
        id = utils.getStorage('some_id');
        if(parseInt(id) > 0 ) { 
            this.model.set({some_id:id});
            this.rendersome(id);
        } else {
            data = new Model().toJSON();
            this.renderdata(data);
        }
    },

    events: {
                   "click #some"    : "someinfo" 
            },

    someinfo : function() {
        var self = this;
                    $.ajax({
                            url: API_URL + "sample/sampleinfo",
                            type: 'POST',
                            crossDomain: true,
            cache: true,
                            data: JSON.stringify({ 'code1': this.model.get('code1'), 
                           'code2' : this.model.get('code2'),
                        "auth" : init.auth, "user_id" : init.user_id }),
                            contentType: 'application/json',
                            success: function(data,response,jqXHR) {
                                  if('SUCCESS' == data._meta.status && data.records.message.me == 'positive') {
                                            self.model.set(data.records);
                                            self.renderdata(data.records);
                                  } else {
                    console.log(data.records.message);  
                    return false;
                  }
                            },
                            error: function (request, status, error) {
                                    console.log(request);
                            }
                    });
    },

            change: function (event) {
                    var target = event.target;
                    var change = {};
                    change[target.name] = target.value;
                    this.model.set(change);
            },

});

return Sample;
});

Router Init code below,

   routeaction : function() {
           var Header = new HeaderView({'el': '#header'});
           Header.render();
           var test = new Tview({'el': '#content'});
            test.render();
            }

UPDATE : I am using backbone.subroute and the view got destroyed but not rendering after that. Becuase both old and current object referring the same element. But why it is not rendering again ? Can you please suggest me what I am missing here ?

 render: function () {

                  // remove the existing header object
                  if(typeof gheader == "object") gheader.close();

                    // render the object      
                    self.$el.html(tmpl(data));
 },

UPDATE : I guess view.remove() is working fine. I have reused the container at $el and view.remove() removed the container element and stopped rendering the other views. Should I recreate the container ? I can use "tagName" but suggest me how do I apply the stylesheet ?

1

There are 1 answers

1
user1801879 On

undelegateEvents() Removes all of the view's delegated events. Useful if you want to disable or remove a view from the DOM temporarily.

http://backbonejs.org/#View-undelegateEvents