keeping original data from an observable

Question

This is tough to explain with any example as Im working on an app for a company and cant paste the source code. I will try to explain as easy as I can.

The app is using among other things, knockout.js with require.js for module loading, and jquery. I have defined a custom bindingHandler lets call it rows, which defines a number of Jquery functions attributed to links based on an edit, remove, update,cancel behaviour of names in a list.

The user types their names, into an input bound to a knockout AppViewModel. they click the add button to add it to an observableArray, which is then outuput in the browser.
Once they have done this, they may edit the name bly clicking edit, or remove it with the remove link.
if they click edit, they are shown a new div (previously hidden) that provides them the ability to edit their name in the text box and select update which adds the new name to the list or they can cancel which takes them back to the non editable list.

However, my issue is that if the user changes their name, in the input box during the edit process and then selects cancel, the new name is still added rather than the original one.

I have been assured the issue is merely in this jQuery function:

          $(element).find('.cancelBtn').on('click', function() {      
              $(element).find('.editRow, .detailRow').toggle();
          });

However I'm not convinced, does the toggle or hide function submit the value in the input box?

the input tag itself is bound to a name:

which corresponds to the appViewModel: ... self.name = ko.observable('');

In just wondering if the observable binding, being two way, is preventing any return to an original state of the name, and simply continuing to observe the updated name entered into the input box altering it before any link is clicked?

RP Niemeyer RP Niemeyer · Accepted Answer · 2012-07-17T15:06:11

If you bind to an observable to an input using the value binding, then it will, by default, update the observable when the change event fires. You can use the "valueUpdate" additional binding to add additional events to trigger the update (like keyup), but the change event is always added. So, if a user makes an edit to your input and then the leaves the field, it will update the observable.

If you want to be able to update/cancel a write to an observable, then you might want to look at something like the technique that I described in this post: http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html

keeping original data from an observable

1 Answers