New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

An Introduction to KnockoutJS – Part 2

logoIn Part 1 of this series I discussed the basics of data binding in KnockoutJS.  In this post, I’ll dive a little deeper in the the binding behaviors of KnockoutJS and show how you can build really responsive web apps using client side development techniques.

While data binding is an important part of KnockoutJS development, it is only part of what makes KnockoutJS so attractive.  KnockoutJS is a JavaScript based implementation of the MVVM design pattern which is a derivation of the Presentation Model as described by Martin Fowler.  Martin Fowler sums up the Presentation Model like this:

The essence of a Presentation Model is of a fully self-contained class that represents all the data and behavior of the UI window, but without any of the controls used to render that UI on the screen. A view then simply projects the state of the presentation model onto the glass.

As Fowler explains, the Presentation Model class should represent both the data and the behavior which are then bound to the view.  Let’s dive into how KnockoutJS handles binding behaviors to your HTML.

Binding Behavior

In MVVM applications users are interacting directly with the view.  The view is responsible for displaying data and accepting user input.  In HTML, this input will generate events which I can then use to trigger some logic.  In the example below I have added a button to my previous example.  When I click the button, I want the app to greet the user.

The problem with this approach is that it mixes my behavior with my view and the behavior code has no knowledge of the current application state as contained in my underlying view-model.  Even if I extract my JavaScript into a separate function it still wouldn’t solve the problem with application state.  What I really want is a clean way to bind the onClick event to some function which is part of my view-model.  This is exactly what Fowler describes as the essence of the Presentation Model.

KnockoutJS solves this problem very cleanly using the data-bind attribute that we looked at previously.  KnockoutJS includes three bindings that allow me to bind standard HTML events.

Binding Description
event This binding adds event handlers for the specified events to the associated DOM element.  You can use this to bind to any defined HTML events.  Within your event handler you can access the current view model data item, the event object or even custom parameters passed as part of the event binding.
click This binding is a shortcut for handling the click event.
submit This binding is a shortcut for handling the submit event for the form element.


The previous example can be refactored to use the KnockoutJS click event binding.

Alternatively I could have written this using the generic event binding.  In addition to using the generic event binding, I also took advantage of the data and event objects which get passed as part of the event handler parameters.

Custom Bindings

While event and data binding are pretty simple and straightforward there will be occasions where you want to create your own binding types.  Maybe you want to create a shortcut binding to handle the Change or Focus events or maybe you want to create a binding which wraps a set of events with a custom behavior.  All of this and more is possible with custom bindings.  In fact all of the event and data bindings that I previously discussed are just bindings that are defined in the core KnockoutJS library but the methods used by the core library are exactly the same methods you’ll use to create your own bindings.

KnockoutJS bindings consist of two methods: init and update.  Creating a binding is as simple as creating an object with these two methods and registering that object with KnockoutJS using ko.bindingHandlers as shown in the JavaScript tab below. Then you can use that new binding in your markup as shown in the html tab.

As a real world example, I often find that when using multi-line text editors that use a lot of screen real-estate for the text editor in order to have a nice editing experience.  However, when my focus is on other form fields I don’t really need to use all that space.  In one project I wanted to expand the text editor only when it had focus.

The init binding method is used for setting the initial state of the DOM elements and also for setting up an event handlers that might be needed to implement the behavior.  As you can see in this case, I was the system to make certain UI changes whenever the element receives or loses focus.  Based on these events I update the view model to reflect whether I am currently editing the field or not.  When the view model biography.editing value changes as a result of the focus and blur events, then KnockoutJS will call the update method.

The update method is used for adding more complex binding logic to an element than you could do with standard bindings.  For example, if I was only changing the CSS for the binding element, then I wouldn’t really need to use the update method.  Instead I could use a style binding with a simple expression to determine whether I was currently editing the biography element or not. Your custom binding does not have to include both the init and update methods. Use one or both as it makes sense for your binding.

KnockoutJS bindings are an incredibly powerful mechanism for building client-side functionality. At this point you should have a basic understanding of how both data and behavior binding works within KnockoutJS.  In the next post of this series I’ll take a look at control flow bindings available in KnockoutJS and show how those bindings can be used for even greater control. The control flow bindings are an integral part of the templating story which is a key part of any client side development toolkit.

This article is cross-posted from my personal blog.


Comment Form

Only registered users may post comments.


Aderson Oliveira (22)
Alec Whittington (11)
Alessandra Davies (3)
Alex Shirley (10)
Andrew Hoefling (3)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (37)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (213)
Chris Paterra (55)
Clint Patterson (108)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (181)
Daniel Valadas (48)
Dave Buckner (2)
David Poindexter (12)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (80)
Francisco Perez Andres (17)
Geoff Barlow (12)
George Alatrash (12)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Kelly Ford (4)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matt Rutledge (2)
Matthias Schlomann (16)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (40)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Oliver Hine (1)
Patricio F. Salinas (1)
Patrick Ryan (1)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Sacha Trauwaen (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott Schlesier (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Steven Fisher (1)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (3)
Tycho de Waard (4)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (180)
William Severance (5)
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out