提交在backbone.js视图中被多次调用

Question

我对我的表单提交有一个看法，我收到了多个调用，因此调用了多个记录。如何停止接听多个电话？

在保存第一条记录后，当我尝试保存另一条记录时，它会保存两次，然后保存三次，随着我继续添加记录而继续增加。

我在另一个视图中给出了事件

事件：{

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

},

我的表单视图是

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("(999) 999-9999");
    var today = Date.parse('now').toString('MM/dd');
    return this;
}
  });

我做错了什么？

Answer 1

此问题的一个可能来源是您创建主干视图的位置。如果您要为要保存的每条记录创建一个新视图，那么您需要通过取消绑定其所有事件来确保您已正确处理前一个视图。否则内存中的所有视图都会得到提交事件并处理它。这篇文章解释了这个问题并为这个问题提供了一个很好的解决方案：

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

基本思想是让您的视图定义以下功能：

    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();
    }

您可以将这些函数放在视图基类中以实现可重用性。

然后您应该定义一个辅助函数来显示和新创建的视图。比如：

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

    }

您应该使用 bindTo 方法将事件绑定到视图。