回答編集履歴
2
表現の修正
answer
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
###
|
|
1
|
+
### オブジェクトの差分比較
|
|
2
2
|
|
|
3
3
|
下記のようにコードを書けば、「追加」「変更」「削除」の全てに対応可能ですが、
|
|
4
4
|
|
|
5
|
-
```
|
|
5
|
+
```JavaScript
|
|
6
6
|
for (let key of Object.keys(afterData)) {
|
|
7
7
|
// in 演算子、プロパティアクセサで比較
|
|
8
8
|
}
|
|
@@ -12,15 +12,21 @@
|
|
|
12
12
|
}
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
+
### defaultValue との比較
|
|
16
|
+
|
|
15
17
|
> 現状の入力フォームの仕様は全てのキーバリューをセットして送信してしまうので、複数人で入力して保存すると上書き保存され入力された項目が消えてしまいます。
|
|
16
18
|
|
|
17
19
|
この様子ですと、submit直前に変更前を得るのではなく、ページ描画時の変更前値をそのまま使うのですよね？
|
|
18
20
|
(変更された値は上書きされるが、変更しなかった値は上書きされない)
|
|
19
21
|
|
|
20
22
|
この仕様にするなら、input要素やtextarea要素側で `defaultValue` プロパティと比較する方がスマートかと思います。
|
|
23
|
+
select要素には初期値取得の機構がないので、初回表示時に `data-defaultSelectedIndex` に埋め込んでおく等の工夫が必要ですが。
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
- `input` イベントで監視 -> **動的**に差分比較
|
|
26
|
+
- `submit` イベントで監視 -> 最期にまとめて差分比較
|
|
23
27
|
|
|
28
|
+
### 上書き前に確認する
|
|
29
|
+
|
|
24
30
|
前述の仕様では、変更範囲が限定されるとはいえ、上書きされる問題は残っています。
|
|
25
31
|
理想的には、下記動作になると思います。
|
|
26
32
|
|
1
表現の修正
answer
CHANGED
|
@@ -19,12 +19,12 @@
|
|
|
19
19
|
|
|
20
20
|
この仕様にするなら、input要素やtextarea要素側で `defaultValue` プロパティと比較する方がスマートかと思います。
|
|
21
21
|
|
|
22
|
-
###
|
|
22
|
+
### 理想的な動作
|
|
23
23
|
|
|
24
24
|
前述の仕様では、変更範囲が限定されるとはいえ、上書きされる問題は残っています。
|
|
25
25
|
理想的には、下記動作になると思います。
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
- 「submit直前の変更前値の更新日時」と「現行の変更前値の更新日時」を比較して、相違なければsubmit
|
|
28
28
|
- 相違あれば、変更前値を別の場所に読み込み、「変更前値をリロードして編集を継続するか」をユーザに尋ねる
|
|
29
29
|
|
|
30
30
|
Re: moro123 さん
|