Explain Inline vs. External Templates in knockout.js.

Revati S Misra 813 26 Jun 2024

1 Answers

Ashutosh Patel 28 Jun 2024

Knockout.js Inline vs External Templates

Let's see the explanation of Inline template vs External template in knockout.js,

Inline Template

Inline templates in Knockout.js are defined directly in your HTML file, usually using a <script> tag with a specific attribute (text/html or text/x-knockout-template). These templates are built into HTML markup and can be referenced by Knockout.js bindings.

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>Inline Template Example</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h3>Inline Template binding with knockout.js</h3>
                <hr>
                <div data-bind="template: { name: 'personTemplate', data: person }"></div>
            </div>
        </div>
    </div>
    <!-- inline template -->
    <script id="personTemplate" type="text/html">
        <div>
            <p>Name: <span data-bind="text: name" class="fw-semibold"></span></p>
            <p>Age: <span data-bind="text: age" class="fw-semibold"></span></p>
        </div>
    </script>
    <script>
    function PersonViewModel() {
        this.person = {
            name: 'John Doe',
            age: 30
        };
    }
    // apply bindings
    ko.applyBindings(new PersonViewModel());
    </script>
</body>
</html>

Explanation

The parameters for the id personTemplate are described in lines in the <script> tag.
It contains HTML markup with Knockout.js bindings (data-bind attributes).
The template binding on the <div> element specifies the name of the personTemplate by name attribute.
Knockout.js renders the template using data from the person object in the ViewModel.

Advantages
Simplicity- Inline templates are easy to define and maintain directly in an HTML file.
Readability- Dimensions appear next to the rest of the HTML markup, making it clear how they are used.

Also, Read: What are custom bindings in Knockout.js?

External Templates

In Knockout.js, external templates are stored in files and dynamically loaded into the application. They are either generated via AJAX or embedded as part of the application process. This approach separates HTML markup from JavaScript logic, encouraging better design and maintenance.

Example-

productTemplate.html

<div id="productTemplate" data-bind="if: name" >
    <h3 data-bind="text: name"></h3>
    <p data-bind="text: description"></p>
    <p><strong>Price:</strong> $<span data-bind="text: price.toFixed(2)"></span></p>
</div>

Index.html

<!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" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!-- inlcude knockout.js cdn -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
    <title>External Template Example</title>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-12 my-3">
                <h3>External Template binding with knockout.js</h3>
                <hr>
                <div data-bind="template: { name: 'productTemplate', foreach: products}"></div>
             
            </div>
        </div>
    </div>

    <script>

        function Product(name, description, price) {
            this.name = name;
            this.description = description;
            this.price = price;
        }            

        // Load external template using jQuery
                $.get('productTemplate.html', function(templateContent) {
                // bind the template with jQuery
                $('body').append(templateContent);

                function MyViewModel() {
                    var self = this;

                    self.products = ko.observableArray([
                        new Product('Chair', 'Comfortable chair for sitting.', 49.99),
                        new Product('Table', 'Sturdy table for working.', 129.99),
                        new Product('Lamp', 'Bright lamp for reading.', 19.99)
                    ]);
                }

                // Initialize the view model and apply bindings
                ko.applyBindings(new MyViewModel());
            });

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

Output-