Derik Whittaker

Syndication

News


KnockoutJs ProTip: When Checked Bindings and Attr Bindings on a check box, order matters

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 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


Posted 06-27-2013 9:10 AM by Derik Whittaker
Filed under:

[Advertisement]

About The CodeBetter.Com Blog Network
CodeBetter.Com FAQ

Our Mission

Advertisers should contact Brendan

Subscribe
Google Reader or Homepage

del.icio.us CodeBetter.com Latest Items
Add to My Yahoo!
Subscribe with Bloglines
Subscribe in NewsGator Online
Subscribe with myFeedster
Add to My AOL
Furl CodeBetter.com Latest Items
Subscribe in Rojo

Member Projects
DimeCasts.Net - Derik Whittaker

Friends of Devlicio.us
Red-Gate Tools For SQL and .NET

NDepend

SlickEdit
 
SmartInspect .NET Logging
NGEDIT: ViEmu and Codekana
LiteAccounting.Com
DevExpress
Fixx
NHibernate Profiler
Unfuddle
Balsamiq Mockups
Scrumy
JetBrains - ReSharper
Umbraco
NServiceBus
RavenDb
Web Sequence Diagrams
Ducksboard<-- NEW Friend!

 



Site Copyright © 2007 CodeBetter.Com
Content Copyright Individual Bloggers

 

Community Server (Commercial Edition)