Derik Whittaker

Syndication

News


Knockout Template and DOM access race conditions

I am working on a learning project and I am using the Knockout JS template bindings along w/ the Knockout External Template engine.  Things were working as expected until I wanted to add a pager to my list. 

The issue is that the Bootstrap Paginator needs access to the underlying DOM in order to build the paging component.  However, the because the fetching of the template and the loading of the DOM are both async I was having issues because in some cases my HTML would return prior to my data and everything work as expected but in other cases my data would load first and the DOM would not be ready. 

In the cases when my DOM was not ready I would not be able to get access to the DOM element in order to have my pager built.  What I needed was a way to be notified once the DOM was loaded.  Fortunately for me template binder exposes a ‘afterRender’ method which I could use to build my pager.  Once I hooked up this afterRender correctly I was able to remove the race condition and I was happy :)

Here is my original binding setup WITHOUT the ‘afterRender’:

image

Here is my updated bindings to use the ‘afterRender’

image

 

Hope this helps someone.

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 07-27-2013 6:07 PM 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)