使用Knockout绑定页面进行更改跟踪是否有标准方法？

Question

我有一个相当复杂的网页，包含各种选项卡、表单、单选按钮、下拉框等。使用Knockout.js将所有内容绑定到通过AJAX调用加载的非常复杂的JavaScript对象上。当然，用户可以随心所欲地更改内容，此时他们会点击“保存”按钮，将所有更改持久化到服务器上。

我正在设计一种良好的方案来跟踪页面上的确切更改，以便实现保存。因此，我提出了几个可能的实现方案。 选项1) 将所有内容发送回服务器并让服务器进行排序: 使用此方法，我将让Knockout更新数据源。 保存按钮将调用.toJS()并将该数据发送回服务器。 优点：它非常容易，在客户端上需要很少的工作。 缺点：服务器不知道发生了什么变化，必须从数据库加载数据进行比较，或者只是再次保存所有字段。 这些字段来自多个表，并具有复杂的关系。 它还将整个文档视为单个原子单位。 如果其他人更改了字段A，而您更改了字段B，则一个用户将失去其更改。

选项2）使用JavaScript比较原始数据和当前数据： 使用这种技术，当用户点击“保存”按钮时，我会系统地比较原始数据和当前数据，并生成变更图表。优点： 这将理想地导致一个紧凑的图表，显示用户改变了什么，如果没有改变，甚至可以无操作。 缺点： 我绑定的数据很复杂。它由字符串、数组、对象、对象数组、带有其他对象的对象数组等组成。查找更改将是一个相当复杂的嵌套循环。

选项3）在UI中实时跟踪更改：我需要观察更改的发生，并在UI元素更改时保留增量。如果有任何待处理更改，则保存按钮只需将该更改图形发送到服务器。 优点：无需比较两个巨大的JavaScript对象以查找更改，但仍具有选项2的所有好处。 缺点： Knockout似乎没有一种标准方法来使用单个事件处理程序监听所有更改。我认为我必须将所有UI元素绑定或创建自定义的bindingHandlers才能实现这种实时更改跟踪。

我的问题：

我的问题主要是针对Knockout.js专家。解决这个常见情况是否有标准方法或建议的指南？返回所有数据（即使未更改）是否是常见设计？还是人们正在实施自定义更改跟踪器？Knockout是否提供任何简化此要求的框架？

更新：发现这个东西，不确定它是否有用或者是否有人对其有任何反馈。

- Mike Christensen

---

刚经历过类似的事情，我会倾向于选择选项1。我们选择了选项3，结果很令人心痛。另一件你需要考虑的事情是，如果用户取消了他们的操作（如果你允许这样做），你必须有一些机制来回滚更改。使用选项1，你可以向服务器请求旧数据（或者做一些更有创意的事情，因为那似乎有点过度），或者你可以使用受保护的可观察对象。 - Andrew Whitaker

Answer 1

我为knockout编写了一个变更跟踪扩展，Pete Smith对其进行了大幅拓展...请看这里：https://roysvork.wordpress.com/2014/01/12/tracking-changes-to-complex-viewmodels-with-knockout-js/。它的工作原理是扩展可观察对象以跟踪用户在客户端上所做的初始状态与更改。我认为这非常好用，并且可以给用户实时反馈，让他们知道自己修改了什么。在实际应用中，我们实现了一个保存面板，显示所有待处理的更改，甚至可以使用变更跟踪器的可重用功能撤消单个更改。

ko.extenders.trackChange = function (target, track) {
    if (track) {
        target.isDirty = ko.observable(false);
        target.originalValue = target();
        target.subscribe(function (newValue) {
            // use != not !== so numbers will equate naturally
            target.isDirty(newValue != target.originalValue);
        });
    }
    return target;
};

- Brett Green

Answer 2

如果是启用/禁用保存按钮的问题，允许用户从该页面/状态导航，则可以检查https://github.com/CodeSeven/kolite，请查看knockout.dirtyFlag.js。希望这可以帮到您。编辑：请记住，您应该“永远不要”信任来自“UI”的数据。真正的比较和验证最终在服务器内的“受控”环境中进行。

- Patrice Calvé

Answer 3

我可能会选择选项2——比较可以简单地将JS对象字符串化，并与其自身的缓存版本进行比较。

其他几个选项在这里讨论here。

附注：也许ko.mapping可以帮助您管理这个庞大的JS对象？

- Bragolgirith