Over a million developers have joined DZone.

Knockout.js ProTip: When Checked Bindings and Attr Bindings on a check box, order matters

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Was trying to figure out why my ‘Checked’ bindings were not setting my default value on page load in my HTML.  Below is the binding setup I was working with


If you notice I have my checked binding bound to an observable on my VM and I am setting the value attribute based on a value in the enum.

I could get the checked binder to fire if AFTER the page loaded I changed the value in the SelectedPointOfView observable this led me to believe my bindings were setup correctly, which turns out they were -- kinda. 

Take a look at the correct bindings below:


If you compare the 2 you should notice that I changed the order in which i specified the binders. When Knockout is parsing the bindings they are parsed left to right.  This meant that the initial pass tried to set checked value but I had not specified what the value of the radio button should be.  When I changed the binding order everything worked as expected because the value for the radio button had already been specified.

From now on I will have to pay closer attention to binding order.

Till next time,

P.S. If you are looking to make the jump from XAML (Silverlight, WPF) to HTML check out my PluralSight course, HTML for the Xaml Developer, for some help.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Derik Whittaker, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}