How does data binding work in Knockout.js?

Ashutosh Patel 900 27 Jun 2024

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.

Markdown for AI

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

Open .md

interview

How does data binding work in Knockout.js?

Can you answer this question?

1 Answers

Working of Knockout.js Data-Binding