Question

I have a view on my form submit i am getting multiple calls hence multiple records are being called. How do i stop getting multiple calls ?

After first records gets saved , when i try to save another record it gets saved two times, then three times, goes on increasing as i go on adding the records.

I have given the event in another view as

events: {

         "submit" : function(){$('#newWaitlistForm').submit();},

},

My form view is

var FormView = Backbone.View.extend({

el: "#newUser",

template: $.template( null, $('#newUser-tmpl') ),


events: {
   "submit" : "submit",

},

initialize: function() {
    this.render();
},

submit: function(e){
    var self = this;    
    console.log('submit');
    e.preventDefault();
    e.stopPropagation();
    var model = new Reservation($('#newWaitlistForm').serializeObject());
    var saved = model.save(null, {
        success: function(data){
            console.log({'success': data});
            //waitlist.add(data);               
            self.$el.find('input,textarea,select').val('');             
            self.goBack();
        },error: function(model, response) {
            console.log({'error': response});
        }
    }, {wait:true});
    console.log({saved: saved});
},

goBack: function(){
    $('.current').removeClass('current');
    $('.main').addClass('current');
},
render: function(){
    this.$el.html($.tmpl(this.template,{}));

    this.$el.find('input[name="phone"]').mask("[phone]");
    var today = Date.parse('now').toString('MM/dd');
    return this;
}
  });

What is it that i am doing wrong ?

Answer 1

One possible source of this issue is the place where you are creating your backbone view. If you are creating a new view for each record you are trying to save, then you need to make sure you have disposed off the previous view properly by unbinding all of its events. Otherwise all views in memory will get the submit event and handle it. This post explains the problem and offers a good solution to this problem:

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Basic idea is to have your view define the following functions:

    bindTo: function(model, ev, callback) {
      model.bind(ev, callback, this);
      return this.bindings.push({
        model: model,
        ev: ev,
        callback: callback
      });
    },
    unbindFromAll: function() {
      _.each(this.bindings, function(binding) {
        return binding.model.unbind(binding.ev, binding.callback);
      });
      return this.bindings = [];
    },
    dispose: function() {
      this.unbindFromAll();
      this.unbind();
      return this.remove();
    }

You can put these functions in a view base class for reusability.

You should then define a helper function to show and newly created views. Something like:

showView: function(view) {
      if (this.currentView) {
        this.currentView.dispose();
      }
      this.currentView = view;
      this.currentView.render();

    }

You should bind events to views using the bindTo method.