How to integrate Knockout.js with other JavaScript libraries or frameworks?

Revati S Misra 890 26 Jun 2024

How to integrate Knockout.js with other JavaScript libraries or frameworks such as jQuery, and Bootstrap?

1 Answers

Ashutosh Patel 27 Jun 2024

Integrate Knockout.js with other JavaScript libraries

To integrate Knockout.js with other JavaScript libraries or frameworks, one must understand how Knockout.js controls data binding and the DOM, and how it interacts with the lifecycle and state management of other libraries or frameworks.

Example-

Let’s go through a simple example of integrating Knockout.js with other JavaScript libraries, such as jQuery.

Integrating Knockout.js with jQuery

Let’s say we have a simple web application that we want to use Knockout.js for data binding and jQuery for some other DOM manipulation or event handling.

Step 1- Setup

Here we need to include the necessary libraries in your HTML file

<!-- Include jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Include Knockout.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>

Step 2- Define a ViewModel with Knockout.js

Create a simple Knockout.js ViewModel that manages some data and connects it to an HTML template.

<div>
    <p>Message: <span data-bind="text: message"></span></p>
    <button data-bind="click: changeMessage">Change Message</button>
</div>

<script>
    // Define ViewModel using Knockout.js
    function AppViewModel() {
        var self = this;
        self.message = ko.observable("Hello, Knockout.js!");

        self.changeMessage = function() {
            self.message("New message from Knockout.js!");
        };
    }
    // Apply bindings
    ko.applyBindings(new AppViewModel());
</script>

In the example above-

We have a <p> tag that displays the message using knockout.js data binding (i.e. data-bind="text: message")
A button that calls a function (changeMessage) defined in the ViewModel that changes the message

Step 3- Integrate with jQuery
Let’s say we want to enhance this example by adding some jQuery functionality, such as displaying a message when a button is clicked:

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>Integrate other library Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <p>Message: <span data-bind="text: message"></span></p>
                <button data-bind="click: changeMessage" class="btn btn-primary">Change Message</button>
                <!-- jQuery alert message -->
                <div id="alertMessage" style="display:none;">
                    <p>Button clicked!</p>
                </div>
            </div>
        </div>
    </div>
    <!-- include jQuery cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>    
    <script>
        // Define ViewModel using Knockout.js
        function AppViewModel() {
            var self = this;
            self.message = ko.observable("Hello, Knockout.js!");
   
            self.changeMessage = function() {
                self.message("New message from Knockout.js!");
   
                // show an alert using jQuery
                $('#alertMessage').fadeIn().delay(2000).fadeOut();
            };
        }
   
        // Apply bindings
        ko.applyBindings(new AppViewModel());
   
        // jQuery code to show an alert
        $(document).ready(function() {
            $('#alertMessage').hide(); // Initially hide the alert
   
            // jQuery click event on the button
            $('button').click(function() {
                $('#alertMessage').fadeIn().delay(2000).fadeOut();
            });
        });
    </script>
</body>
</html>

Output-