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