按钮被多次调用

Question

我有一个搜索页面和一个编辑页面。 我搜索用户，然后当我得到结果时，我能够编辑用户。 我正在使用CanJS，我为每个页面定义了路由。

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

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

编辑我让它工作。 每当我点击一个新的编辑按钮时，某个视图被置于另一个之上，它就不会取代旧视图。

所以我尝试了这个并且它有效：

, '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

你不应该像你一样手动调用destroy。 问题是您对两个视图使用相同的DOM元素（#formArea）。

当从DOM中删除元素时，可以自动为您调用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, {});
}