Over a million developers have joined DZone.

Knockout JS, Attr Binding and Radio Button Values

DZone's Guide to

Knockout JS, Attr Binding and Radio Button Values

· Web Dev Zone
Free Resource

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

When working with Knockout you have the ability to seamlessly bind to a radio button via the checked binder.  When working with Radio buttons it is very common to use the value attribute in order to know which radio button was selected.  In fact the code below should be very common if using this binding.


However, when I look at the code above I have 1 issue with it and that is the use of the hard coded value “1” as the value.  I HATE magic strings/values.  Having a raw value like this in your code does not lead to discoverability, I mean what what does ”1” mean?  I would much rather use a constant/enumeration here in order to provide better discoverability.  However, your straight up HTML does not lend itself to this.  For example the code below would NOT yield the results you are expecting.


However, we can harness the power of Knockouts Attr binding to solve our readability problem.  Take a look at the code below


By using the Attr binding I can use the Knockout binding engine to add the value 1 to my HTML at runtime which gives me the correct value as well having my enum value for readability at code time.  Below is the rendered HTML


Till next time,

P.S. If you want to learn more about Knockout watch my Pluralsight Course on Knockout JS

P.S.S. If you want to learn how to transition your XAML skills to HTML you can watch my course on Html for the XAML Developer

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.


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.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}