在Web應用程序中跟蹤更改

Question

我有一個應用程序，用戶需要查看最新編輯過程中所做的更改。 通過更改，我的意思是，所有輸入中所做的更改（如textarea，dropdowns）。

我想通過在右上角顯示背景圖像來實現此目的，然後當用戶單擊此背景圖像時，將顯示一個顯示其差異的彈出窗口。 我正在使用原型1.7.0。

我的第一個問題是： -
1.什麼是實現此功能的最佳方法？
2.我可以在背景圖片上放一個onClick嗎？

Answer 1

在jQuery庫中有一些功能，我相信會對你有所幫助。如果你使用的是原型，我猜想你可能會使用一些類似的功能。

我建議寫一些像這樣的代碼：

var $input = $('input').add('textarea').add('select'); 

$input.each(function() { 
var id = $(this).attr('id'); 
var value = $(this).val(); 
var hiddenId = 'hidden' + id; 
var newHiddenInput = $("<input type='hidden'").val(value).attr('id',hiddenId); 
$(this).after(newHiddenInput); 
}); 

上面的代碼將爲每個輸入，文本區域一個新的隱藏的輸入，並選擇你的頁面上。它將具有與其複製的輸入相同的值。它將有一個id，相當於將id加上「hidden」一詞。

我不知道是否可以將點擊處理程序附加到背景圖像。如果你的輸入被包含在<div>之內，你可以通過將點擊處理程序附加到你的div來獲得你想要的結果。

在任何情況下，您現在都應該擁有舊值，您可以輕鬆將其與用戶輸入進行比較，以便您可以準備差異彙總。

Answer 2

原型爲我們提供了Hash類，這是幾乎完美的這一點，但缺乏計算與另一散差的方式，讓我們補充一點......

Hash.prototype.difference = function(hash) 
{ 
    var result = this.clone(); 
    hash.each(function(pair) { 
     if (result.get(pair.key) === undefined) 
      // exists in hash but not in this 
      result.set(pair.key, pair.value); 
     else if (result.get(pair.key) == pair.value) 
      // no difference so remove from result 
      result.unset(pair.key); 
     // else exists in this but not in hash 
    }); 
    return result; 
}; 

這是沒有辦法判斷一個元素被點擊就是它的背景圖像 - 你可以找到它被點擊的座標，但這不是萬無一失的，特別是因爲CSS3增加了複雜的背景和過渡。最好有一個絕對定位的元素來充當按鈕。

$('button-element').observe('click', function() { 
    var form_values = $H($('form-id').serialize(true)); 
    if (old_values) { 
     var differences = old_values.difference(form_values); 
     if (differences.size()) { 
      showDiffPopup(differences); 
     } 
    } 
    window.old_values = form_values; 
}); 
// preset current values in advance 
window.old_values = $H($('form-id').serialize(true)); 

剩下的工作就是實現showDiffPopup顯示計算differences。