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

时间:2012-07-20 13:53:09

标签: jquery backbone.js backbone-events

我对我的表单提交了一个视图提交我正在接收多个呼叫,因此正在调用多个记录。我如何停止接听多个电话?

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

我在另一个视图中将该事件视为

事件:{

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

我做错了什么?

1 个答案:

答案 0 :(得分:3)

此问题的一个可能来源是您创建骨干视图的位置。如果要为要保存的每条记录创建新视图,则需要确保通过解除其所有事件的绑定来正确处理上一视图。否则内存中的所有视图都将获得提交事件并处理它。这篇文章解释了这个问题并为这个问题提供了一个很好的解决方案:

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方法将事件绑定到视图。