by Andreas

KnockoutJS – how to get started

imageKnockoutJS is a Javascript framework implementing the Model-View-ViewModel (MVVM) pattern. It’s purpose is to provide a way for developers “to create rich, responsive display and editor user interfaces with a clean underlying data model.” (Wikipedia). This is achieved by offering declarative bindings, dependency tracking and an automatic refresh of the UI upon changes to the data model.

Recently we have been using KnockoutJS in a fairly large web based document management system. We were replacing an existing desktop application and it was important to keep the system responsive and “non-web like”. We achieved this through substantial use of javascript based frameworks like jQuery and KnockoutJS. This blog post will help you get started with the setup and a very basic example, and hopefully you’ll see the potential of this great technology. Later I will add more blog posts about the advanced (and sometimes quirky) ways to use KnockoutJS.

First of all, fire up Visual Studio 2010 / 2012. Open or create your web project and install the KnockoutJS NuGet package.


Add a reference to knockoutjs (at the time of writing v. 2.1.0), define a simple data model containing an observable variable for name and occupation and some input and label fields. Take note of the declarative bindings (“data-bind”):

<!DOCTYPE html>
<html xmlns="">
    <title>Simple KnockoutJS test</title>
    <script src="Scripts/knockout-2.1.0.js"></script>
    <!-- input fields -->
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Occupation: <input data-bind="value: occupation" /></p>

    <!-- auto updated labels -->
    <p><label data-bind="text: firstName"></label> is a <label data-bind="text: occupation"></label></p>

        function myViewModel() {
            self = this;
            self.firstName = ko.observable("Andreas"); // set default value
            self.occupation = ko.observable("Software Developer");

        // initialize
        ko.applyBindings(new myViewModel());

(Note: creating a self object in the data model is not necessary, but it has become a habit of mine to ensure a clear separation from the regular this reference).

imageThe above code will generate a page with two input fields and a text. The observable variables (firstName, occupation) in the data model are bound to the input fields and labels through the “data-bind” parameter. To test the binding run the project and see how changes to the input fields trigger the labels to be updated (when the cursor leaves the input field). This simple example shows the KnockoutJS declarative bindings and automatic UI refresh in action.

Now that you have a working example running on your computer I recommend going through the tutorials at the official Learn KnockoutJS site. Through their jsfiddle type GUI you can complete the basic steps as well as some more advanced examples, and then steal some code and ideas and transfer it into your own test project. This is the best way to prepare you before implementing the framework in your real world projects.