What is a template and how to create one in Knockout.js?

Anubhav Sharma 855 27 May 2024

1 Answers

ICSM Computer 28 May 2024

A template is an HTML markup with special bindings that allow dynamic data to be inserted and manipulated. Templates are used to define the structure and appearance of UI elements based on data from view models. Here's how you can create a template in Knockout.js:

Creating a Template -

Define the HTML markup: Create an HTML markup with Knockout bindings.

    <script type="text/html" id="person-template">
        <div>
            <h2 data-bind="text: name"></h2>
            <p data-bind="text: age"></p>
        </div>
    </script>

In this example, the template contains bindings (data-bind) that will be populated with data from the view model.

Bind the template: Bind the template to an element in your HTML.

<!-- HTML markup -->
<div data-bind="template: { name: 'person-template', data: selectedPerson }"></div>

Bind the data to “selectedPerson” object

// ViewModel for the application
function AppViewModel() {
    this.selectedPerson = ko.observable({
        name : 'Sam Altan',
        age : 45
    });
}
// Activates knockout.js and binds the ViewModel
ko.applyBindings(new AppViewModel());

This tells Knockout.js to use the template named person-template and populate it with data from the selectedPerson object in the view model.

Bind all code in one place -

<!doctype html>
<html lang="en">

<head>
    <!-- Meta tags for character set and viewport configuration -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title of the webpage -->
    <title>Bootstrap demo</title>

    <!-- Link to Bootstrap CSS for styling -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

    <!-- Link to Knockout.js library for MVVM pattern support -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js"
        integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="container">

    <!-- HTML markup -->
    <div data-bind="template: { name: 'person-template', data: selectedPerson }"></div>
    <div data-bind="template: { name: 'person-template', data: selectedPerson }"></div>
    <script type="text/html" id="person-template">
        <div>
            <h2 data-bind="text: name"></h2>
            <p data-bind="text: age"></p>
        </div>
    </script>

    <!-- Link to Knockout.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
    <!-- Link to custom JavaScript file -->
    <!-- <script src="app.js"></script> -->
    <script>


        // ViewModel for the application
        function AppViewModel() {
            this.selectedPerson = ko.observable({
                name: 'Sam Altan',
                age: 45
            });
        }

        // Activates knockout.js and binds the ViewModel
        ko.applyBindings(new AppViewModel());

    </script>
</body>

</html>

Applying Templates Dynamically

Templates can also be applied dynamically using Knockout's template binding.

<div data-bind="template: { name: selectedTemplateName, data: templateData }"></div>

In this case, selectedTemplateName is an observable in the view model that determines which template to use dynamically, and templateData is the data to be bound to the template.

Conclusion

Templates in Knockout.js are HTML markup with special bindings that allow dynamic data insertion. By defining templates and binding them to elements, you can create dynamic and reusable UI components that update automatically as your data changes.

Markdown for AI

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

Open .md

forum

What is a template and how to create one in Knockout.js?

Can you answer this question?

1 Answers

Creating a Template -

Applying Templates Dynamically

Conclusion