Form input sync doesn't play well with knockout.js bindings

[mattbrooks2010]

"Typing in input fields is synced across browsers"

In a knockout.js app, the view model isn't updated with the synced form values. This is true for both the value and textInput bindings.

Firing the input.change event causes the view model to be updated. For example, typing the following line into the browser console after the values are synced works:

$("input").change();

Would you consider a way to either support this out of the box, opt-in via configuration or perhaps even add a client-side hook for developers to execute client-side logic after values are synced?

[madskristensen]

I'd rather find a way to do it generically so it works for any library including vanilla JS. Any ideas on how to do that?

[mattbrooks2010]

Premise sounds good to me but not sure I follow exactly.

I'm not sure how other libraries / frameworks expect to be notified of form changes. If I was writing vanilla JS and wanted to respond to a form change programmatically, I'd certainly listen for the change event, perhaps via input.addEventListener('change', function handler() {...}). This would at least work for input elements.

That does seem to be how KO works too. Have I misunderstood?

[madskristensen]

I was playing around with calling .blur() on the input fields, but didn't get it working.

[mattbrooks2010]

Did you try .change()? I do this in a Chrome console after typing values in another connected browser and the KO view model instance in Chrome is correctly updated.

[madskristensen]

I don't remember if I tried that.

[mattbrooks2010]

Looking at the code in SyncEngine.js you're already using jQuery. In the function syncForm I believe all you need to do is call element.change() after line 30 or 33, for example.

Sorry, I'm on my phone otherwise I'd get you links to a gist or mock this up in-browser. Let me know if you'd like me to do that.