Getting Started with Knockout.js: A Beginner's Guide

Knockout.js is a JavaScript library that helps you create rich, responsive user interfaces with a clean underlying data model. It follows the Model-View-ViewModel (MVVM) pattern, which provides a clear separation between the UI and the logic behind it. This guide will walk you through the basics of Knockout.js and how to get started with it.

What is Knockout.js?

Knockout.js is a standalone JavaScript implementation of the MVVM pattern that allows developers to:

Create dynamic user interfaces with data-binding.
Simplify complex UIs by keeping the UI and data separate.
Implement a responsive design that automatically updates the UI when the data model changes.

Setting Up Your Environment

Before you can start using Knockout.js, you'll need to include it in your project. You can either download it or include it from a CDN.

Including Knockout.js from a CDN

You can include Knockout.js in your HTML file by adding the following script tag to the <head> or at the end of the <body>:

    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
        integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Creating a Simple Application

Let's create a simple application that allows you to manage a list of products. We'll cover the following steps:

Setting up the HTML structure.
Creating the ViewModel.
Binding the ViewModel to the View.

Step 1: Setting Up the HTML Structure

Create an HTML file with the following structure:

<!doctype html>
<html lang="en">

<head>
    <!-- Meta tags for character set and viewport configuration -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title of the webpage -->
    <title>Bootstrap demo</title>

    <!-- Link to Bootstrap CSS for styling -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
        integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <!-- Main container using Bootstrap's grid system -->
    <div class="container">
        <!-- Header for the example -->
        <h2>Simple Knockout.js Example</h2>

        <!-- Section containing the interactive elements -->
        <div>
            <label>Name: </label>
            <!-- Text input bound to the 'name' observable -->
            <input id="nameInput" type="text" data-bind="value: name, valueUpdate: 'input'">
            <!-- Paragraph displaying the bound 'name' observable -->
            <p>Hello, <span data-bind="text: name"></span>!</p>
        </div>
    </div>

    <!-- JavaScript section defining the ViewModel and applying bindings -->
    <script>
        // ViewModel definition
        function AppViewModel() {
            // Observable property 'name' initialized with the value "World"
            this.name = ko.observable("John Doe");
        }

        // Apply Knockout.js bindings to the ViewModel instance
        ko.applyBindings(new AppViewModel());
    </script>
</body>

</html>

Step 2: Creating the ViewModel

The ViewModel in Knockout.js acts as the intermediary between the View (HTML) and the Model (data). Here's the ViewModel for our product management application:

// ViewModel definition
function AppViewModel() {
    // Observable property 'name' initialized with the value "World"
    this.name = ko.observable("John Doe");
}

Step 3: Binding the ViewModel to the View

To connect the ViewModel to the View, you need to call the ko.applyBindings function and pass an instance of the ViewModel:

// Apply Knockout.js bindings to the AppViewModel
ko.applyBindings(new AppViewModel());

Running the Application

Save the HTML file and open it in a web browser.
You should see a form to add new products and a table that displays the list of products.
Add, edit, and delete products using the form and buttons provided.

Read more

Introduction Knockout.js

Why Knockout js is not as popular as Angular JS?

Form validation and request submission in knockout js

Product Drag and Drop with Knockout

Knockout.js: Building Dynamic Web Applications