Getting Started with Knockout.js

23rd April 2017

Knockout.js is a JavaScript library that helps create rich, responsive user interfaces. Getting started with Knockout.js is easy. Simply include the library within your code, and write JavaScript to implement it within your project.

Knockout.js makes use of the MVVM (Model-View-ViewModel) pattern. This means that Knockout provides a separation of data within your project, such as the Model, which represents domain-specific data or information that the application will be working with.

With Knockout.js, usually Ajax calls are made to server-side code to read and write from this stored model data.

The View, which is the interface that the user sees and interacts with.

The first name is <span data-bind="text: personFirstName"></span>
The last name is <span data-bind="text: personLastName"></span>

And the View Model, which is the code representation of the data and operations on a user interface.

var myViewModel = {
    personFirstName: 'John',
    personLastName: 'Doe'
};

To start using Knockout.js, include the JavaScript library within your project by adding the following line.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

Then include the View and ViewModel code within your project file, which might look something like the below.

<!DOCTYPE html>
<html>
    <head>
        <title>Knockout Example</title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
    </head>
    <body>
        The first name is <span data-bind="text: personFirstName"></span><br/>
        The last name is <span data-bind="text: personLastName"></span>
        <script type="text/javascript">
            var myViewModel = {
                personFirstName: 'John',
                personLastName: 'Doe'
            };
        </script>
    </body>
</html>

The final piece of code needed to see Knockout.js in action is ko.applyBindings(), passing in the view model as an argument.

This ensures that the view model properties are bound to the data-bind HTML attributes.

Note that a second argument can also be passed into applyBindings() which defines which part of the document you want to search for data-bind attributes.

For example, passing in document.getElementById('menu-container') will only apply the data bindings to the elements within the element with an ID of menu-container.

The activation line of code should be added near of the bottom of the HTML document or within a DOM-ready handler.

<script type="text/javascript">
    var myViewModel = {
        personFirstName: 'John',
        personLastName: 'Doe'
    };
    ko.applyBindings(myviewModel);
</script>

Within your HTML page, the Knockout properties should be bound to your HTML.

Getting Started with Knockout.js

This represents a how Knockout.js works in a basic view model, but what really makes Knockout powerful is the ability to update your UI automatically when the view model changes.

This can be demonstrated by Using Observables.