jsviews：如何在表单提交而不是 onkeydown 上触发模型数据更新

Question

我最近遇到了 jsrender/jsviews。在我的第一次尝试中，我使用双向数据 linking/binding 实现了一个表单。这是可行的，但只要用户在输入字段中键入内容，它就会立即更改模型数据。

我想实现的模式是在表单提交时更新模型数据，允许用户轻松取消他们所做的任何编辑。

现在我修改了我的表单模板以使用一种方式绑定，然后我简单地使用 jquery 并将值从 DOM 中提取出来并使用 $.observable 更新模型数据(..).setProperty(...) 当用户提交表单时。

它可以工作，但非常丑陋。我假设必须有一种更简洁的方法，不涉及直接查询 DOM 表单元素的当前值。

有没有一种干净的方法可以在 jsviews 的 onsubmit 处理程序中触发模型数据更新？或者实现这种使用模式的首选方式是什么？

基本上我希望实现与这个 AngularJS 问题中提到的相同的事情：Is there a pattern for dealing with "Cancel" in AngularJS modal dialogs?（即相当于 ng-model-options="{ updateOn: 'submit' }" )

Answer 1

双向绑定是绑定到视图模型，而不是模型 - 因此它是对应于在浏览器中呈现给用户的视图的数据。 View 可能会随着 View Model 的变化而变化，而无需更新服务器上的 Model。

您可以绑定到表单的提交操作。 <form data-link="{on 'submit' saveData}">：这将触发 saveData 方法，您可以在该方法中将适当的当前视图模型数据提交到将更新模型的服务器。

但是如果你想有一个撤消功能，你需要在视图模型初始化或从服务器更新时，或者在最后一次调用 saveData 方法将当前视图模型数据保存回服务器。撤消按钮将恢复到最后一个快照。

Compiled View Models provide features (map, merge and unmap) 这使得 'snapshooting' 简单：

undo: function() {
  this.merge(savedData); // Revert to previous savedData
  ...
},
saveData: function() {
  savedData = this.unmap(); // Save current data, for subsequent Undo behavior
  ...
}

这里有一些 JsFiddle，它们显示了对提交操作的绑定，并带有一个用于恢复到上次保存状态的撤消按钮：

This one 使用普通 JavaScript 对象。
This one 使用 编译视图模型
This one 更 advanced/complex - 具有多个 编译视图模型 。（它会在某个时候成为 jsviews.com 上的样本...）

jsviews：如何在表单提交而不是 onkeydown 上触发模型数据更新

jsviews: How to trigger model data update on form submit instead of onkeydown

jquery

jsrender

jsviews