6

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

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

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

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

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

我的问题：

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

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

4

3 回答 3

1

我为皮特·史密斯（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;
};
于 2015-04-15T17:01:35.593 回答
1

我可能会做的是采用选项 2 - 比较本身可以像字符串化 JS 对象并将其与自身的缓存版本进行比较一样简单。

这里讨论了其他几个选项。

PS也许ko.mapping可以帮你管理这个JS对象的怪物？

于 2015-04-15T15:40:02.430 回答
1

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

检查 knockout.dirtyFlag.js

希望这可以帮助。

编辑：请记住，您应该“从不”相信来自“UI”的数据。真正的比较和验证最终会在服务器内的“受控”环境中进行。

于 2013-02-21T19:58:52.220 回答