interview

home / developersection / interviews / what are computed observables in knockout.js?

Ask Question
Ashutosh Kumar Verma

Developer

I'm a passionate content writer with a deep background in technology and web development. Skilled at writing engaging, well-researched, and SEO-friendly articles, I enjoy simplifying complex topics into clear and impactful writing that informs, inspires, and engages readers.

Follow
Can you answer this question?
Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

27-Jun-2024

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-

What are computed observables in Knockout.js?

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

advertising
advertising

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy