jquery - 在backbone.js View 中提交被多次调用

Question

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

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

我已在另一个 View 中将该事件指定为

事件:{

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

},

我的表单 View 是

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

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

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

基本思想是让您的 View 定义以下功能:

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

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

然后您应该定义一个辅助函数来显示新创建的 View 。像这样的东西:

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

    }

您应该使用bindTo 方法将事件绑定(bind)到 View 。