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

取消绑定和取消定位事件以仅提交一个表单

1 个答案: