javascript - 取消绑定和取消委托事件以仅提交一个表单

Question

我有 3 个选项卡可以在它们之间切换。对于我的一个选项卡，我在 Backbone 中生成一个表单/视图，我可以将其提交给我的控制器。问题是，如果我在选项卡之间切换并单击生成表单的选项卡，然后单击提交，我会将多个 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;
    }

我已经读到您应该这样做unbind，undelegateEvents但是，我仍然看到对我的控制器的多个 AJAX 调用。如何设置 Backbone，以便我可以多次在选项卡之间切换并且仍然只提交一个表单？

Answer 1

我实际上重构了我的代码以检查 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");
}