Archive for the ‘Knockout’ Category

An island with a different viewModel

Friday, June 5th, 2015

I have a multi-page application with a navigation panel that is used across all pages. Each page has its own view model, the panel view model is the same. I could remember to always bind both models but I was hoping there would be a more universal solution. Some way to bind my one-page model to the whole document, and yet have an island of DOM elements automatically bound to a different model.
(more…)

KO validation with Bootstrap error and feedback? Can do.

Wednesday, June 3rd, 2015

I’ve been struggling to configure Knockout Validation to use Bootstrap error classes and form-control-feedback element. Finally, it’s working and now I’m going to brag about it. It’s quite simple really ;-)
(more…)

clearError() in KO Validation updates validity too

Monday, June 1st, 2015

Let me start with the take-away message:

Don’t clear errors with clearError() if you reuse your form and if you set messagesOnModified to true (default value).

Now why. Say you have a Create Thingy form with a field for the new thingy name. Name is obligatory but you don’t want the creating experience to start with an error message. So you keep messagesOnModified at true.

User opens the dialog, chooses a name that is invalid and then gives up – clicks Cancel. Then following a sudden outburst of creativity, he opens the dialog again. At this point, you want the old invalid attempt to be gone, all errors cleared.

My solution was to clear the form values on hidden.bs.modal, reset isModified(false) and get rid of errors with clearErrors(). Well, it turned out that if the user submitted the form immediately, with an empty value, it passed as valid!

The culprit was clearErrors() – it not only removes the error message but also marks the model as valid! So the right procedure here is to use error(null) instead of clearErrors().