2013-02-20 100 views
0

我有3个可以在其间切换的选项卡。对于我的其中一个选项卡,我在主干中生成了一个表单/视图,可以将其提交给我的控制器。问题是,如果我在标签之间切换并点击生成表单的标签,然后点击提交,我会向控制器提交多个AJAX调用。取消绑定和取消关闭事件以仅提交一个表格

addPlace: function(e) { 
     if(!this.isSearch){ 
     this.add = new add({ 
      model: this.model, 
      attachPoint: this.$("div.addAPlaceForm") 
     }); 
     $('.add_to_place').addClass("hidden"); 
     $('.matchingWrapper').addClass("hidden"); 
     this.add.render(); 
     this.add.on("place:selected", this.placeSelect, this); 
     this.isSearch = true; 
     } 
    } 

    //this.add.render() 
    render: function(e){ 
     this.$el.html(this.addPlaceForm({ 
     place: this.model 
     })); 
     view.prototype.render.call(this); 
    } 

当用户切换到不产生形式的其他选项卡之一,它击中这个功能:

addPlacebacklink: function(e) { 
     this.add.undelegateEvents(); 
     this.add.unbind(); 

     $("div.addAPlaceForm").html(""); 
     this.isSearch = false; 
    } 

我已阅读,你应该unbindundelegateEvents,不过,我仍然可以看到多个AJAX调用到我的控制器。如何设置Backbone,以便我可以多次切换标签并仍然只提交一个表单?

回答

0

我实际上重构了我的代码来检查this.add,并在切换选项卡时隐藏表单。

addPlace: function(e) { 
    if(!this.add){ 
    this.add = new add({ 
     model: this.model, 
     attachPoint: this.$("div.addAPlaceForm") 
     this.add.render(); 
     this.add.on("place:selected", this.placeSelect, this); 
    }); 
    this.$('.add_to_place').addClass("hidden"); 
    this.$('.matchingWrapper').addClass("hidden"); 
    this.$(".form-horizontal").removeClass("hidden"); 

    } 
} 


addPlacebacklink: function(e) { 
    this.$(".form-horizontal").addClass("hidden"); 
}