interview

Home / DeveloperSection / Interviews / Explain the difference between one-way and two-way data binding with examples.

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

28-Jun-2024

Knockout.js one-way vs two-way Data Binding

 

One-way data binding

One-way data binding involves binding data from a model (JavaScript) to a view (HTML). Changes to the model automatically update the view, but changes to the view do not necessarily update the model. This means that data flows in one direction, usually from the model to the UI.

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>One-Way Data Binding Example</h2>
                <!-- bind the knockout data -->
                <p>Message: <span data-bind="text: message"></span></p>
            </div>
        </div>
    </div>

    <script>
    // ViewModel definition
    function ViewModel() {
        var self = this;

        // Observable for the message
        self.message = ko.observable('Hello, World!');
    }
    ko.applyBindings(new ViewModel());
    </script>
</body>
</html>


Two-Way Data Binding
The binary data binding not only updates the view when the model changes but also updates the model when the view changes. This means that changes to the model or view are automatically reflected in another.

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>One-Way Data Binding Example</h2>
                <!-- two-way bind the knockout data -->
                <input type="text" data-bind="value: inputValue" class="form-control" />
                <p>Message: <span data-bind="text: inputValue"></span></p>
            </div>
        </div>
    </div>

    <script>
    // ViewModel definition
    function ViewModel() {
        var self = this;

        // Observable for the message
        self.inputValue = ko.observable('Hello, World!');
    }
    ko.applyBindings(new ViewModel());
    </script>
</body>
</html>


Key Differences

Direction of Data Flow

  • One-way binding Data flows from the model to the view. Changes to the model update the view.
  • Two-way binding Data flows in both directions between the model and the scene. Changes to the model update the view, and changes to the view update the model

Implementation Complexity

  • The one-way binding is easier to implement and understand because the concept is updated based solely on changes in the model.
  • Two-way binding requires additional methods to ensure that changes in state propagate back to the sample, which may require more robustness.

 

Also, Read: What are subscriptions in Knockout.js?

MindStick Training

Liked By