With writing console.log(item.Name());
into your templateToUsePosition
function you have created a dependency on the Name
property in the KO dependency tracking mechanism.
So every time when your item.Name()
changes your templateToUsePosition
will be reevaluated.
So this is what happens in your code:
You click on edit which changes
positionToEdit
which triggers yourtemplateToUsePosition
function and turn your UI to edit modeYou enter something in the textbox and click on the save link
Because the textbox loses the focus it updates your
Name
propertyBecause the
templateToUsePosition
has a dependency on theName
property it is triggered again and rebuilds your UI, so your original click event on the original save link is lost and you have to click again.One the second click there is no change in the
Name
so it the click even normally goes through.
So to solve this problem you just need to remove the console.log(item.Name());
.
However if you still need to use the value of item.Name
in your templateToUsePosition
and you don't want to create a dependency then you need to use the peek()
method on the observable:
console.log(item.Name.peek());
Demo JSFiddle.