How does data binding work in Knockout.js?

Ashutosh Patel 665 27 Jun 2024

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.

1 Answers

Ashutosh Patel 27 Jun 2024

Working of Knockout.js Data-Binding

In Knockout.js, data binding is an important feature that allows you to establish a connection between your UI (HTML elements) and your underlying data model (JavaScript objects).

Here is how data binding works in Knockout.js,

Example-
Let’s say we have a simple user profile view. Here is a snippet of our HTML:

<!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>Data Binding Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js data-bind Example</h2>
       <div class="data-binds">
       		<!-- bind the knockout.js data into view using data-bind -->
            <p>FirstName: <span data-bind="text: firstName"></span></p>
            <p>LastName: <span data-bind="text: lastName"></span></p>
            <p>Age: <span data-bind="text: age"></span></p>
       </div>
    </div>
    
    <script>
        function AppViewModel() {
            var self = this;
                self.firstName= ko.observable('John');
                self.lastName= ko.observable('Doe');
                self.age= ko.observable(30);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel()); 

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

Output-

Handles user input
Knockout.js provides bindings to handle user input, such as text inputs. For example, if we want to update the user's first name, we can bind an input field like this.

<!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>Data Binding Example</title>
</head>
<body>
    <div class="container my-3">
        <h2>Knockout.js data-bind Example</h2>
       <div class="data-binds">
            <!-- take input from user -->            
             <p>
                <input type="text" data-bind="value:firstName" class="form-control" placeholder="enter first name"/>
             </p>
             <p>
                <input type="text" data-bind="value: lastName" class="form-control" placeholder="enter last name" />
             </p>
        <!-- bind the knockout.js data into view using data-bind -->
            <p class="my-3">FirstName: <span data-bind="text: firstName"></span></p>
            <p>LastName: <span data-bind="text: lastName"></span></p>
            <p>Age: <span data-bind="text: age"></span></p>
       </div>
    </div>
   
    <script>

        function AppViewModel() {
            var self = this;
                self.firstName= ko.observable();
                self.lastName= ko.observable();
                self.age= ko.observable(30);
        }
        // Applies bindings to the view
        ko.applyBindings(new AppViewModel());

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

Output-

This <input> fields will be populated with the current value of the self.firstName and self.lastName. Any changes the user makes to the <input> field will update the firstName and lastName found in our JavaScript.

interview

How does data binding work in Knockout.js?

Can you answer this question?

1 Answers

Working of Knockout.js Data-Binding