Insight into Knockout

Have you ever struggled with lengthy chunks of unwieldy JavaScript code? Tired of chasing down all those subtle intricacies of event-driven asynchronous processing? If you value simplicity and well-structured code Knockout might be an option.


Knockout is a JavaScript library utilizing the MVVM pattern to handle UI changes behind the scenes. No  explicit refresh / reload of the components needs to be done. To me, this is a major benefit of its own. The other reason it appeals to me is, actually, its lack of features. You want a compelling UI? Use plain old HTML and style it as you like. Need more? Knockout goes very well with jQuery. Further, it enforces a good practice of clear separation of concerns and isolates well encapsulated behavioural model from the presentation. Finally, it is a tiny little creature weighing only a few kilobytes.


If you happen to check their website make sure you try the interactive coding examples. On the down side, you cannot get quickly to the feature you are after until you manually (again and again) reconstruct the examples by following the tutorials. This, in fact, made me create my own sample application. Just to remind myself of some of the principles the library adheres to.


The demo can be viewed here. It is a simple booking wizard with a fake mailbox. My aim was to built up a sensible self-contained demo to prove the code base stays relatively small. I ended up with some 120 lines of JavaScript code. Considering that quite a number of lines caters for data which would normally be loaded from the server, it is not too bad. The example integrates Knockout with jQuery and jQuery validation plugin.
Hope it helps.

Download Source Code