Knockout Validation doesn't work on initial load if mapping plugin is called twice

[bmccord]

I posted this to StackOverflow as well. If there is an answer there, I will update this issue.

This one has been causing me grief for a while.

I have a web app that uses Knockout, Knockout Mapping, and Knockout Validation. Everything is going pretty well except for this problem. The problem is demonstrated by this Fiddle: http://jsfiddle.net/bmccord/eMHdH/.

To demonstrate the problem, run the fiddle and then select something from the list. When it comes up, clear out the Name field. You may or may not see the validation message (it is random. On fiddle it seems never to show when first running but in my actual code, it sometimes does and sometimes doesn't when refreshing the page).

Now click on the reload button and do the same thing again. This time you should see the validation error.

Now for the really fun part. At the bottom of the javascript, comment out the line that says:

self.loadSupportData(); This is just to keep the second mapping from running. Try the experiment again. This time the validation will work on initial run.

What is causing this?

[IFYates]

I can't answer what's causing it, but if you call loadSupportData before loadData, it seems to work every time for me(Opera 12 and Chrome 22). Could be something to do with the order of binding for the validation.

[bmccord]

I was encouraged when this worked in the Fiddle, but unfortunately it doesn't work in my production code. There are, of course, some more things that are going on in the actual code (for instance, I use KOLite's asyncCommand to make the ajax calls for data and the mappings are a little more involved.

But, this all points to your final comment being the right track. I suspect a timing or order issue also, but I haven't been able to track it down yet.

[wjbryant]

I ran into a similar issue. Here's my simplified example: http://jsfiddle.net/Um7Mn/. The call to ko.mapping.fromJS() breaks knockout-validation. Try commenting out that line and running the example again and it should work.

Putting that line in a setTimeout circumvents the issue, so it does seem to be a timing or order problem. Unfortunately, using setTimeout is not a feasible solution, since it would break other parts of my code.

I was able to work around it another way by moving the validation rules out of the create callback, like this: http://jsfiddle.net/Um7Mn/2/. Although, I'm not sure why this makes a difference.

[giulianob]

@wjbryant I just had the same issue as you yesterday and its fixed if you get the latest mapping code. The binary he has in output is old, get the one from the root ( https://github.com/SteveSanderson/knockout.mapping/blob/master/knockout.mapping.js ).

[wjbryant]

@giulianob Thanks. I just tried it and it works.

I didn't notice there was already an issue for this with knockout.mapping (https://github.com/SteveSanderson/knockout.mapping/issues/113). The mapping plugin was using setTimeout internally which was causing the issue. It looks like this has been resolved in the latest development version and will be in the next release.