1

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

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

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

编辑 我让它工作。每当我点击一个新的编辑按钮时，不知何故，视图被放置在另一个之上，它并没有取代旧的。

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

, '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);
 }
}
4

1 回答 1

3

您不需要像这样做那样手动调用destroy。问题是您对两个视图 (#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, {});
}
于 2014-03-13T00:53:51.460 回答