forum

Home / DeveloperSection / Forums / What is a template and how to create one in Knockout.js?

Ask Question
Anubhav Kumar

Anubhav Kumar

Follow
The Anubhav portal was launched in March 2015 at the behest of the Hon'ble Prime Minister for retiring government officials to leave a record of their experiences while in Govt service .

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

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.

MindStick Training

Liked By