---
title: "What are subscriptions in Knockout.js?"  
description: "What are subscriptions in Knockout.js?"  
author: "Ashutosh Patel"  
published: 2024-06-28  
updated: 2024-06-28  
canonical: https://www.mindstick.com/interview/33931/what-are-subscriptions-in-knockout-js  
category: "knockcout js"  
tags: ["javascript", "knockout.js"]  
reading_time: 3 minutes  

---

# What are subscriptions in Knockout.js?

#### Knockout.js Subscribe() method

In Knockout.js, a subscription refers to a mechanism that allows you to track observable changes (which allows you to track changes to properties). Subscriptions enable you to respond to changes in observables by executing custom logic each time the value of an observable changes.

Here is how subscriptions work in Knockout.js,

## Creating a Subscription

You can create a subscription for an observable by calling a `subscribe` method on the observable. The `subscribe` method takes a callback function as an argument. This callback function will be called whenever the value of the observable changes

```javascript
var myObservable = ko.observable('initial value');
myObservable.subscribe(function(newValue) {
	myObservable("New value is: "+ newValue)
});
```

## Automatic Execution

When you use that function to create a new value of an observable (e.g., `myObservable(newValue)`), Knockout.js automatically notifies all clients by calling their callback function

## Example-

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
        <title>subscribe method Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h2>Knockout.js subscribe() Example</h2>

                <input type="text" data-bind="value: inputText, valueUpdate: 'input'" placeholder="Type something...">

                <p>Current value: <span class="fw-semibold" data-bind="text: myObservable"></span></p>
            </div>
        </div>
    </div>

    <script>
    // ViewModel definition
    function ViewModel() {
        var self = this;

        // Observable for storing input text
        self.inputText = ko.observable('');

        // Observable to display current value
        self.myObservable = ko.observable('Initial value');

        //Create subscribe to changes in inputText
        self.inputText.subscribe(function(newValue) {
            self.myObservable("You typed: " + newValue);
        });
    }
    ko.applyBindings(new ViewModel());
    </script>
</body>
</html>
```

## Output-

![What are subscriptions in Knockout.js?](https://www.mindstick.com/interviewquestion/f0bdf39e-148a-43fe-936a-9c99e5d94e2a/images/fb7c44ad-f9c9-4867-b185-ad80922c4cf9.png)

**Also, Read:** [Explain Inline vs. External Templates in knockout.js.](https://www.mindstick.com/forum/160794/explain-inline-vs-external-templates-in-knockout-js)

## Answers

### Answer by Ashutosh Patel

#### Knockout.js Subscribe() method

In Knockout.js, a subscription refers to a mechanism that allows you to track observable changes (which allows you to track changes to properties). Subscriptions enable you to respond to changes in observables by executing custom logic each time the value of an observable changes.

Here is how subscriptions work in Knockout.js,

## Creating a Subscription

You can create a subscription for an observable by calling a `subscribe` method on the observable. The `subscribe` method takes a callback function as an argument. This callback function will be called whenever the value of the observable changes

```javascript
var myObservable = ko.observable('initial value');
myObservable.subscribe(function(newValue) {
	myObservable("New value is: "+ newValue)
});
```

## Automatic Execution

When you use that function to create a new value of an observable (e.g., `myObservable(newValue)`), Knockout.js automatically notifies all clients by calling their callback function

## Example-

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- include bootstrap cdn -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
        <title>subscribe method Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h2>Knockout.js subscribe() Example</h2>

                <input type="text" data-bind="value: inputText, valueUpdate: 'input'" placeholder="Type something...">

                <p>Current value: <span class="fw-semibold" data-bind="text: myObservable"></span></p>
            </div>
        </div>
    </div>

    <script>
    // ViewModel definition
    function ViewModel() {
        var self = this;

        // Observable for storing input text
        self.inputText = ko.observable('');

        // Observable to display current value
        self.myObservable = ko.observable('Initial value');

        //Create subscribe to changes in inputText
        self.inputText.subscribe(function(newValue) {
            self.myObservable("You typed: " + newValue);
        });
    }
    ko.applyBindings(new ViewModel());
    </script>
</body>
</html>
```

## Output-

![What are subscriptions in Knockout.js?](https://www.mindstick.com/interviewquestion/f0bdf39e-148a-43fe-936a-9c99e5d94e2a/images/fb7c44ad-f9c9-4867-b185-ad80922c4cf9.png)

**Also, Read:** [Explain Inline vs. External Templates in knockout.js.](https://www.mindstick.com/forum/160794/explain-inline-vs-external-templates-in-knockout-js)


---

Original Source: https://www.mindstick.com/interview/33931/what-are-subscriptions-in-knockout-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
