多次調用按鈕

Question

我有一個搜索頁面和一個編輯頁面。我搜索一個用戶，然後當我得到結果時，我可以編輯用戶。我使用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); 
} 
} 

Answer 1

你不應該需要調用摧毀手動，你在做什麼。問題在於，您對兩個視圖都使用相同的DOM元素（#formArea）。

從DOM中刪除元素時，會自動爲您調用銷燬，因此這是缺少的步驟。

所以也許不是重複使用相同的元素，而是可以先追加一個元素，然後將新創建的元素傳遞給控件。像這樣：

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