避免用户更改的数据被覆盖？

Question

我有一个应用程序，您可以在其中输入有关客户的一些信息。我有一个问题，即应用程序中的其他更改可以轻松覆盖此信息。

我想：

1. 显示信息的文本区域
2. 显示的消息应在应用程序的其他位置对其进行更改时更新
3. 如果用户更改了textarea中的消息，则不应该通过服务器端更改或应用程序中的其他更改覆盖textarea中的消息
4. 按下保存按钮时，模型会更新

只需这样做：

<textarea ng-model="customer.info"></textarea>
<button ng-click="save(customer)">Save</button> 

无法工作，因为如果某些内容更改为服务器上的客户对象，则信息字段将被重置，用户的更改将被覆盖。

Answer 1

<强> 更新
回应您的评论/更新问题：我只是使用几个事件监听器跟踪textarea的状态，检查用户是否更改了值。如果是这样：textarea不再与服务器数据保持同步 我还检查textarea是否具有焦点，如果是这种情况，则不应更新该值，因为用户可能正在编辑其内容。

最后，我附加了一个模糊事件处理程序，它会再次检查该值，以防用户“撤消”更改。如果用户意外添加了char，并在以后删除它，则textarea的值可能与来自服务器的最后一个已知值相同，在这种情况下，textarea的值应该再次保持同步。

我设置了一个简单的小提琴，使用间隔来完成所有这些。用您的worker，ajax回调或您正在使用的任何内容替换与时间间隔相关的代码。如果它是一个worker，则取消设置间隔应该替换为使用处理程序函数解除onmessage处理程序的绑定，该处理程序函数同步textarea或不同步textarea。或者使用单个函数，只要它想要更改textarea的值，就检查changed标志。简单明了。
的 Here's the fiddle
这里是代码（小提琴版包含一些解释各种零碎的实际注释）：

(function (txt)
{
    var initialValue = txt.value,
        changed = false,
        id,
        callback = function()
        {
            if (changed === false)
                initialValue = (txt.value += ' Server-sync');
            else
            {
                clearInterval(id);
                id = null;
            }
        };
    txt.addEventListener('change', function()
    {
        if (this.value !== initialValue)
            changed = true;
    }, false);
    txt.addEventListener('focus', function()
    {
        changed = true;
    }, false);
    txt.addEventListener('blur', function()
    {
        if (this.value !== initialValue)
            changed = true;
        else
        {
            changed = false;
            id = setInterval(callback, 5000);
        }
    }, false);
    id = setInterval(callback,5000);
}(document.querySelector('#foo')));

---

初步回答

就像我在评论中说的那样：

<textarea ng-model="customer.info" id='foo' readonly></textarea>

阻止用户更改textare的值，但您仍然可以在JS代码中设置/更改其值：

var changeTxt = (function(txt)
{
    return function(addVal)
    {
        txt.value += addVal;
    };
}(document.querySelector('#foo')));

Demo

为了使textArea的值保持同步，您可以在对值客户端进行任何更改之前执行AJAX调用，或者创建一个工作者“thread”来轮询服务器以进行更改自上次获取值以来已经完成的。

看到你正在使用angular.js，我必须承认我没有任何经验可以最好地使用角度来解决你的问题，但是快速谷歌搜索引导我3-way data binding，这看起来很有希望。