Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

home / developersection / interviews / what are subscriptions in knockout.js?
Ask Question
Ashutosh Patel
Ashutosh Patel

Web Developer

I am a professional .NET developer with over 4 years of hands-on industry experience in designing, developing, and maintaining scalable web applications. I specialize in .NET Core, C#, RESTful APIs, and database-driven systems using SQL Server.

Message

1 Answers

Ashutosh Patel
Ashutosh Patel 28 Jun 2024
Report Abuse

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-

Ashutosh Patel

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

MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md