0

This is a follow-up question from here: Get observable from array

I now have an observable from a list, and I pass it to a modal for editing like this:

var report = currentViewModel.getReport(reportId);
ko.applyBindings(report,$("#"+targetDiv)[0]);

(targetDiv is the modal that I just loaded via ajax)

Now the modal shows up, and when I edit the report name, as soon as i loose focus, the name is changed in the original list. Im starting to get the hang of this knockout, and that is exactly the behavior that I expect.

My question is, how do I get it to not do that until I click save? There is a cancel button on the modal and I would like for any changes to wait until I click save. I have seen in the documentation that I can do this on a keypress, but I want it on an onclick.

Anyway to do what I am after?

Community
  • 1
  • 1
mmaceachran
  • 3,178
  • 7
  • 53
  • 102
  • You would need to bind a different observable to the text input. Then on the save button do something like `data-bind="click: function () { report.name(inputObservable()) }"`. I'm not really sure of the structure of `report` so I'm making some assumptions with that code. – DonovanM Feb 13 '16 at 18:47
  • We'd need an actual (but preferably *minimal*) repro of your scenario to be able to help without having to guess at what might work for your situation, I'm afraid. – Jeroen Feb 13 '16 at 18:54
  • Expanding on what @DonovanM said, you need something like a 'displayedValue' observable and an 'editedValue' observable, and then some mechanism to update the former once the 'isBeingEdited' on the form is cancelled (e.g. a computed which is triggered by the change in this flag). – gzost Feb 14 '16 at 10:54

1 Answers1

1

Take a look at protected observables.

Roy J
  • 42,522
  • 10
  • 78
  • 102