1

検索ページと編集ページがあります。ユーザーを検索し、結果を取得したら、ユーザーを編集できます。私は CanJS を使用しており、ページごとにルートを定義しています。

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

FormUser には、saveButton のクリック イベントがあります。ユーザーを検索してから編集ボタンを押し、何かを変更して変更を保存すると、正常に動作します。しかし、保存後に検索ページに戻って以前と同じことをすると、保存ボタンが 2 回呼び出されます。なぜこれが起こっているのか分かりません。私は何を間違っていますか？

編集 私はそれを機能させました。新しい編集ボタンをクリックするたびに、どういうわけかビューが別のビューの上に配置されていましたが、古いものを置き換えていませんでした。

だから私はこれを試してみましたが、うまくいきました：

, '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 要素を使用していることです。

Can は要素が 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, {});
}
于 2014-03-13T00:53:51.460 に答える