いくつかのオプションを表すいくつかのチェックボックス、ラジオボタン、テキスト入力などのダイアログがあると仮定します。ページ上のリンクをクリックして、このダイアログを開きます。ダイアログ内の[保存]ボタンと[キャンセル]ボタンをクリックして、オプションを保存したり、キャンセルしたりできるようにしたい。
[保存]ボタンの処理は簡単に見えます。コントロールを確認して現在の値を取得するだけです。私が疑問に思うのは、キャンセルボタンをより適切に制御する方法です。そこで、ダイアログ内のいくつかのオプションを変更してから、気が変わって[キャンセル]ボタンをクリックします。明らかに、変更する前にすべてのコントロールを元の状態に戻す必要があります。
どうすればこれをうまく行うことができますか？ダイアログの読み込み時に現在の状態をいくつかの非表示のフィールドまたは属性に保存する必要がありますか？あなたの考えを共有してください。
ダイアログを開くときに現在の状態のコピーを作成し、ダイアログでコピーを変更し、ユーザーがボタンを押したときに、現在の状態を新しい状態に置き換えるか、それに応じてコピーを単に削除します。
組み込みのリセットを使用してフォームの値をデフォルトに戻し、保存を処理するだけで、変更が行われる前の状態が元の値に戻ります。
現在保存されている状態をdata属性内に保存できます。HTML ではこのような属性は のように見えdata-something="some value"ますが、JavaScript から簡単にアクセスできます。例えば。jQuery には、次のようなショートカットがありますjQuery(element_selector).data('something')。のように JavaScript から設定することもできますjQuery(element_selector).data('something', 'some other value')。
このメカニズムを使用して、これらの値を最初に設定し、保存するたびに上書きすることができます。誰かが「キャンセル」をクリックした場合、コントロール/フォーム要素を、その要素に関連付けられたデータとして保存した値と一致する状態に復元するだけです。
このようなデータは DOM 要素に関連付けられているため、それらを削除するとデータが削除されることに注意してください。ただし、そのような場合は非常にクリーンで柔軟なアプローチです。
もっと：
data-属性について: http://ejohn.org/blog/html-5-data-attributes/