Why does reset() function does not work properly with jsviews

Question

I am using jsviews for data binding:

My template

<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>

My Form

<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>

The template binds the value correctly. I changed the value in the text field and clicked on reset button. The text field becomes empty but I want the value that was rendered on page load.

Why does reset() function not work properly with jsviews data-link

Welcome to StackOverflow. I have reformatted your question slightly to make the template and form format properly. Take a look at stackoverflow.com/editing-help for details of how to format your question. — Richard Neish

BorisMoore BorisMoore · Accepted Answer · 2014-01-18T05:38:21

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.

Why does reset() function does not work properly with jsviews

1 Answers