我有一个相当复杂的网页,包含各种选项卡、表单、单选按钮、下拉框等。使用Knockout.js将所有内容绑定到通过AJAX调用加载的非常复杂的JavaScript对象上。当然,用户可以随心所欲地更改内容,此时他们会点击“保存”按钮,将所有更改持久化到服务器上。
我正在设计一种良好的方案来跟踪页面上的确切更改,以便实现保存。因此,我提出了几个可能的实现方案。 选项1) 将所有内容发送回服务器并让服务器进行排序: 使用此方法,我将让Knockout更新数据源。 保存按钮将调用
我正在设计一种良好的方案来跟踪页面上的确切更改,以便实现保存。因此,我提出了几个可能的实现方案。 选项1) 将所有内容发送回服务器并让服务器进行排序: 使用此方法,我将让Knockout更新数据源。 保存按钮将调用
.toJS()并将该数据发送回服务器。 优点:它非常容易,在客户端上需要很少的工作。 缺点:服务器不知道发生了什么变化,必须从数据库加载数据进行比较,或者只是再次保存所有字段。 这些字段来自多个表,并具有复杂的关系。 它还将整个文档视为单个原子单位。 如果其他人更改了字段A,而您更改了字段B,则一个用户将失去其更改。
选项2)使用JavaScript比较原始数据和当前数据: 使用这种技术,当用户点击“保存”按钮时,我会系统地比较原始数据和当前数据,并生成变更图表。优点: 这将理想地导致一个紧凑的图表,显示用户改变了什么,如果没有改变,甚至可以无操作。 缺点: 我绑定的数据很复杂。它由字符串、数组、对象、对象数组、带有其他对象的对象数组等组成。查找更改将是一个相当复杂的嵌套循环。
选项3)在UI中实时跟踪更改:我需要观察更改的发生,并在UI元素更改时保留增量。如果有任何待处理更改,则保存按钮只需将该更改图形发送到服务器。 优点:无需比较两个巨大的JavaScript对象以查找更改,但仍具有选项2的所有好处。 缺点: Knockout似乎没有一种标准方法来使用单个事件处理程序监听所有更改。我认为我必须将所有UI元素绑定或创建自定义的bindingHandlers
才能实现这种实时更改跟踪。
我的问题:
我的问题主要是针对Knockout.js专家。解决这个常见情况是否有标准方法或建议的指南?返回所有数据(即使未更改)是否是常见设计?还是人们正在实施自定义更改跟踪器?Knockout是否提供任何简化此要求的框架?
更新:发现这个东西,不确定它是否有用或者是否有人对其有任何反馈。