在Web应用程序中跟踪更改

问题描述：

我有一个应用程序，用户需要查看最新编辑过程中所做的更改。通过更改，我的意思是，所有输入中所做的更改（如textarea，dropdowns）。在Web应用程序中跟踪更改

我想通过在右上角显示背景图像来实现此目的，然后当用户单击此背景图像时，将显示一个显示其差异的弹出窗口。我正在使用原型1.7.0。

我的第一个问题是： -
1.什么是实现此功能的最佳方法？
2.我可以在背景图片上放一个onClick吗？

已经做了什么改变？一个页面，一个textarea，一个图像的形式？ – 2012-01-10 16:17:15

看我编辑..... – awsome 2012-01-10 16:43:31

我不知道为什么有人应该downvote这个问题，而不留下评论为什么这个问题downvoted。 – awsome 2012-01-10 19:05:05

答

在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来获得你想要的结果。

在任何情况下，您现在都应该拥有旧值，您可以轻松将其与用户输入进行比较，以便您可以准备差异汇总。

答

原型为我们提供了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。

在Web应用程序中跟踪更改

相关推荐