---
title: "What is a template and how to create one in Knockout.js?"
description: "What is a template and how to create one in Knockout.js?"
author: "Anubhav Sharma"
published: 2024-05-27
updated: 2024-05-28
canonical: https://www.mindstick.com/forum/160667/what-is-a-template-and-how-to-create-one-in-knockout-js
category: "knockcout js"
tags: ["javascript", "javascript library", "javascript framework", "knockout.js"]
reading_time: 3 minutes
---
# What is a template and how to create one in Knockout.js?
What is a [template](https://www.mindstick.com/blog/282/creating-custom-template-in-joomla) and how to create one in [Knockout.js](https://www.mindstick.com/forum/160797/conditional-html-heading-tag-based-on-variable-in-knockout-js)?
## Replies
### Reply by ICSM Computer
A template is an HTML markup with special bindings that allow dynamic data to be inserted and manipulated. [Templates](https://www.mindstick.com/forum/160665/how-do-you-create-and-register-a-component-in-knockout-js) 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.
```html
```
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
```
## Bind the data to “selectedPerson” object
```javascript
// 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 -
```html
Bootstrap demo
```
#### Applying Templates Dynamically
Templates can also be applied dynamically using Knockout's **template** binding.
```html
```
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.
---
Original Source: https://www.mindstick.com/forum/160667/what-is-a-template-and-how-to-create-one-in-knockout-js
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.