Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

codeA guest post by Ryan Niemeyer, who has over 15 years of experience in the software industry working with primarily web-based technologies. He loves JavaScript, participating in the open source community, and trying to learn new things everyday. He is always willing to lend a helping hand to anyone that needs it. Since, 2010 Ryan has been involved with the Knockout.js project and writes about his experiences with it on his blog ( He is a JavaScript Engineer for appendTo.

The bindings and dependency tracking system in Knockout.js make it easy to keep a dynamic user interface in sync with backing data. However, as the number of bindings grow, the initialization of a page can begin to take a significant amount of time. In many cases, these bindings are doing work that will only benefit the end-user, if they follow a certain path in the application. By deferring this work until a user actually interacts with a component, the binding time can be greatly reduced.

For example, Knockout.js’s options binding is commonly used to bind the options available to a select tag. If you have a scenario where there are hundreds of options and this dropdown is repeated many times, perhaps on each row of a grid, then building all of these option elements can be time consuming. For every field that is not visited by a user, this processing is wasted.

Binding these fields only when necessary can greatly improve performance. A good choice might be to only build the list of options when the field gains focus. For this type of functionality, a custom binding would be an appropriate choice. For starters, we can use Knockout.js’s hasFocus binding inside of our custom binding to apply the options binding when the field gains focus.

This binding does prevent the options from being built initially, but has created a new problem. Knockout’s value binding, when used on a select element, tries to ensure that the current value is actually a valid option. So, in a scenario where we use this binding on a field that is bound with the value binding and has an initial value, Knockout will end up clearing the value, as it does not represent a valid choice (the options start as empty).

As an alternative, we could instead always use the options binding, but bind it against a new computed observable that will adjust the options when the field is focused. Initially, the computed can return an array that contains a single item that matches the current value. Note that in this case, we are only working with options that are primitive values. The updated binding might look like:

If you are working with objects instead of primitive values, by using the optionsText and optionsValue options, then you would need to do a bit more work when building the initial option and would need to pass optionsText and optionsValue when binding the node.


Knockout.js bindings are a powerful way to manage a complex user interface. Bindings like the options binding, however, can potentially do a lot of work that a user does not need. By waiting to initialize a field until it gains focus, you can drastically speed up the initial load of an application and avoid a significant amount of unnecessary processing.

Look below for some great JavaScript resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

JavaScript Enlightenment is for you if you’re an advanced beginner or intermediate JavaScript developer. It will solidify your understanding of the language—especially if you use a JavaScript library. In this concise book, JavaScript expert Cody Lindley provides an accurate view of the language by examining its objects and supporting nuances.
Learning JavaScript Programming Video teaches you the basics of programming with JavaScript, the worlds most used programming language. The tutorial is designed for the absolute beginner – no prior JavaScript programming experience is required in order to get the most out of this video training. You will start with learning what programming is, and specifically, what JavaScript is, how it it used, and its limitations. You will discover variables and data types, and how to take input and create output. Craig covers conditions, loops, arrays, sorting, functions, paramaters and debugging. You will even learn advanced concepts such as OOP, string manipulations, regular expressions and other programming patterns.
Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript’s grace and precision to write real browser-based applications. The book begins with the fundamentals of programming—variables, control structures, functions, and data structures—then moves on to more complex topics, like object-oriented programming, regular expressions, and browser events. With clear examples and a focus on elegance, Eloquent JavaScript will have you fluent in the language of the web in no time.

Tags: Bindings, Javascript, Knockout, Knockout bindings, Knockout.js, Lazy Loading, OPTIONS, user interface,

Comments are closed.