Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Web Dev Zone
Free Resource

Never build auth again! Okta makes it simple to implement authentication, authorization, MFA and more in minutes. Try the free developer API today! 

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

image

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:

image

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.

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}