javascript - 按钮被多次调用

Question

我有一个搜索页面和一个编辑页面。我搜索一个用户，然后当我得到结果时，我可以编辑该用户。我正在使用 CanJS 并且我已经为每个页面定义了路由。

, 'search route': function (data) {
    new FormUserQuery('#formArea', {});
    }
}
, 'edit/:id route': function (data) {
    new FormUser('#formArea', {}).renderView(+data.id);
    }
}

在 FormUser 中，我有一个 saveButton 的点击事件。如果我搜索用户然后按下编辑按钮，更改某些内容并保存更改，它工作正常。但是，如果在保存后返回搜索页面并执行与之前相同的操作，则会调用两次保存按钮。我不知道为什么会这样。我做错了什么？

编辑我成功了。每当我点击一个新的编辑按钮时，不知何故 View 被放置在另一个之上，它并没有取代旧的。

所以我尝试了这个并且成功了:

, 'search route': function (data) {
   if (typeof self.form === 'undefined')
   {
    self.form = new MegaControl.FormUserQuery('#formArea', {});
   }
   else {
    self.form.destroy();
    self.form = new MegaControl.FormUserQuery('#formArea', {});
   }

}
, 'edit/:id route': function (data) {
 if (typeof self.form === 'undefined') {
  self.form = new MegaControl.FormUser('#formArea', {})
  self.form.renderView(+data.id);
 }
 else {
  self.form.destroy();
  self.form = new MegaControl.FormUser('#formArea', {});
  self.form.renderView(+data.id);
 }
}

Answer 1

你不应该像你正在做的那样手动调用销毁。问题是您对两个 View (#formArea) 使用相同的 DOM 元素。

当元素从 DOM 中移除时，Can 会自动为您调用 destroy，因此这是缺少的步骤。

因此，您可以先附加一个元素并将新创建的元素传递给控件，​​而不是重复使用相同的元素。像这样的东西:

'search route': function (data) {
    $('#formArea').empty(); // this will remove previous elements and trigger destroy automatically
    var view = $('<div>'); 
    $('#formArea').append(view); 
    new FormUserQuery(view, {});
}