Question

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

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

现在我已经修改了我的表单模板以使用单向绑定，然后我只使用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

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

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

但是如果你想要一个撤销功能，你需要在从服务器初始化或更新View Model时创建一个快照，或者在上次调用saveData方法时将当前View Model数据保存回服务器。 “撤消”按钮将恢复为上一个快照。

Compiled View Models提供了一些功能（map，merge和unmap），使“快照”变得简单：

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

以下是一些JsFiddles，它们显示与提交操作的绑定，并带有一个撤消按钮，用于恢复到上次保存的状态：

This one使用纯JavaScript对象。
This one，它使用已编译的View Models
This one更高级/复杂 - 使用多个编译的View模型。（在某些时候它将是jsviews.com上的一个示例......）

jsviews：如何在表单提交而不是onkeydown

1 个答案: