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

Classify programming languages: Build a model that predicts a code's programming language based on its text.  Content provided by IBM Developer. 

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.

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}