Question

我有一个相当复杂的网页，其中包含各种标签，表单，单选按钮，下拉菜单等。它们都使用Knockout.js绑定到通过AJAX调用加载的非常复杂的JavaScript对象。当然，用户可以根据自己内心的内容进行捣乱，然后点击保存按钮将所有更改保留回服务器。

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

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

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

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

我的问题：

我的问题主要针对Knockout.js专家。是否有标准方法或建议的指导方针来解决这种明显常见的情况？发回所有数据，甚至是没有改变的东西，一个常见的设计？或者是人们实施自定义更改跟踪器？ Knockout是否提供了满足此要求的任何框架？

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

Answer 1

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

进行检查

检查knockout.dirtyFlag.js

希望这有帮助。

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

Answer 2

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

讨论了其他一些选项here。

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

Answer 3

我为淘汰赛写了一个改变跟踪器扩展，Pete Smith大大扩展了......

看看这里： https://roysvork.wordpress.com/2014/01/12/tracking-changes-to-complex-viewmodels-with-knockout-js/

它的工作原理是扩展observable以跟踪初始状态与用户在客户端上所做的更改。我认为这非常有用，可以为用户提供实时反馈，以了解他们所修改的内容。实际上，我们实际上是通过使用更改跟踪器的可重用功能来实现一个显示所有待处理更改的保存面板，甚至允许他们撤消各个更改。

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;
};

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

3 个答案: