interview

Home / DeveloperSection / Interviews / What are subscriptions in Knockout.js?

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

28-Jun-2024

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

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-

<!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-

answer 6518922806012730

Also, Read: Explain Inline vs. External Templates in knockout.js.

MindStick Training

Liked By