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 computed observables 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 27 Jun 2024
Report Abuse

Knockout.js Computed Observable

The objects calculated in Knockout.js are unique view objects that update themselves whenever any of the clients changes. It is used to get or calculate values ​​based on other visible or explicit JavaScript attributes in your visualization. Here is a detailed explanation:

Definition

Computed observables (ko.computed()) in Knockout.js are functions that compute a value based on other observables or simple JavaScript properties. They are automatically updated every time a care is due based on changes.

Example- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"></script>
    <title>Computed observable Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js Computed observable</h2>
        <p>First Name: <span data-bind="text: firstName"></span></p>
        <p>Last Name: <span data-bind="text: lastName"></span></p>
        <p>Full Name: <span data-bind="text: fullName"></span></p>

    </div>
    
    <script>

        function AppViewModel() {
            this.firstName = ko.observable('John');
            this.lastName = ko.observable('Doe');
            // knockout.js computed observable
            this.fullName = ko.computed(function() {
                 return this.firstName() + ' ' + this.lastName();
            }, this);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel()); 

    </script>
</body>
</html>

In this example, 

fullName is a numeric observable based on firstName and lastName. Whenever firstName or lastName changes, fullName automatically computed its value (this.firstName() + ' ' + this.lastName();).

Output-

Ashutosh Patel

Also, Read: Explain the role of observables and computed observables in Knockout.js?

MindStick Training