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

Question

我正在使用 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 一起正常工作

Answer 1

reset() will revert the the intial/default value set in the value property: <input value="initialValue" />

For your case you could set the 'statically defined' value to the initial data value:

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

or better - attribute encode the initial value to avoid injection attacks:

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

The result is that the user will see the original value. However the reset action will only change the UI value, not the value in your underlying data that you are linking to. (See http://bugs.jquery.com/ticket/11043 for a related issue/concern in jQuery). So you would probably be better off not using reset() but instead cloning your initial data, and using $.observable(userVO).setProperty(originalUserVO) to revert.