为什么 reset() 函数不能与 jsviews 一起正常工作答案

【问题标题】：Why does reset() function does not work properly with jsviews为什么 reset() 函数不能与 jsviews 一起正常工作
【发布时间】：2014-01-17 12:36:21
【问题描述】：

我正在使用 jsviews 进行数据绑定：

我的模板

<script id = "ProfileTemplate" type="text/x-jsrender">
<input data-link="userVO.first_name" type="text">
<input type="reset" value="Reset" onclick="this.form.reset();">
</script>

我的表格

<form name="profile-form" id="profile-form" action="profile.html">
<div id="flightEditDetail"></div>`enter code here`
</form> 

<script>
var template = $.templates("#ProfileTemplate");
template.link("#flightEditDetail", profileJSON);
</script>

模板正确绑定了值。我更改了文本字段中的值并单击了重置按钮。文本字段变为空，但我想要在页面加载时呈现的值。

为什么 reset() 函数不能与 jsviews data-link 一起正常工作

【问题讨论】：

欢迎来到 StackOverflow。我已经稍微重新格式化了您的问题，以使模板和表单格式正确。请查看stackoverflow.com/editing-help，了解如何格式化您的问题的详细信息。

标签： reset jsviews

【解决方案1】：

reset() 将恢复在value 属性中设置的初始/默认值：<input value="initialValue" />

对于您的情况，您可以将“静态定义”值设置为初始数据值：

<input data-link="userVO.first_name" type="text" value="{{:userVO.first_name}}"/>

或更好——属性编码初始值以避免注入攻击：

<input data-link="userVO.first_name" type="text" value="{{attr:userVO.first_name}}"/>

结果是用户将看到原始值。但是，重置操作只会更改 UI 值，而不是您链接到的基础数据中的值。（有关 jQuery 中的相关问题/关注，请参阅 http://bugs.jquery.com/ticket/11043）。所以你最好不要使用 reset() 而是克隆你的初始数据，并使用$.observable(userVO).setProperty(originalUserVO) 来恢复。

【讨论】：