javascript - 是否有使用 Knockout 绑定(bind)页面进行更改跟踪的标准方法？

Question

我有一个相当复杂的网页，其中包含各种选项卡、表单、单选按钮、下拉菜单等。所有这些都使用 Knockout.js 绑定(bind)到通过 AJAX 调用加载的非常复杂的 JavaScript 对象。当然，用户可以随心所欲地处理内容，这时他们可以点击保存按钮将所有更改保存回服务器。

我正在想出一个好的设计来准确跟踪页面上的更改，以便我可以实现保存。因此，我提出了一些可能的实现方案。

选项 1) 只需将所有内容发回并让服务器进行整理:使用此方法，我会让 Knockout 仅更新数据源。 Save 按钮将调用 .toJS() 并将该数据发送回服务器。 优点:它非常简单，客户端只需做很少的工作。 缺点: 服务器并不知道发生了什么变化，必须从数据库中加载数据进行比较，或者再次保存所有字段。这些字段来自多个表并且具有复杂的关系。它还将整个文档视为单个原子单元。如果其他人更改了字段 A 而你更改了字段 B，则一个用户将丢失他们的更改。

选项 2)使用 JavaScript 比较原始数据和当前数据:使用这种技术，当用户点击保存按钮时，我会系统地比较原始数据和当前数据并生成变化图。 优点:理想情况下，这会生成一个准确显示用户更改内容的紧凑图表，如果没有任何更改，甚至可以不进行任何操作。 缺点:我绑定(bind)的数据很复杂。它由字符串、数组、对象、对象数组、对象数组和其他对象等组成。寻找变化将是一个相当复杂的嵌套循环。

选项 3)在 UI 中进行更改时跟踪更改:我必须在更改发生时观察更改，并在 UI 元素更改时保持增量。如果服务器有任何未决更改，保存 按钮只会将该更改图发送到服务器。 优点:无需比较两个巨大的 JavaScript 对象来寻找变化，但仍然具有选项 2 的所有优点。缺点:不会出现 knockout em> 有一个标准的方法来使用一个事件处理程序来监听所有的变化。我相信我将不得不求助于绑定(bind)到所有 UI 元素，或者在 Knockout 中创建自定义 bindingHandlers 来实现这种实时更改跟踪。

我的问题:

我的问题主要针对 Knockout.js 专家。是否有标准方法或推荐指南来解决这种明显常见的情况？发回所有数据，甚至是没有改变的东西，是一种通用设计吗？或者人们正在实现自定义更改跟踪器？ Knockout 是否提供任何类型的框架来简化此要求？

更新:找到this thing ，不确定它是否有用，或者是否有人对此有任何反馈。

Answer 1

如果这是启用/禁用“保存”按钮的问题，允许用户“从”该页面/状态导航，那么您可以检查 https://github.com/CodeSeven/kolite

检查 knockout.dirtyFlag.js

希望这对您有所帮助。

编辑:请记住，您“永远不要”信任来自“用户界面”的数据。真正的比较和验证，最终会在服务器内的“受控”环境中进行。