---
title: "What Are Templates in Knockout.js?"  
description: "What Are Templates in Knockout.js?"  
author: "ICSM Computer"  
published: 2025-04-23  
updated: 2025-04-23  
canonical: https://www.mindstick.com/interview/34049/what-are-templates-in-knockout-js  
category: "knockcout js"  
tags: ["knockout.js", "knockout.js template", "knockout.js components"]  
reading_time: 5 minutes  

---

# What Are Templates in Knockout.js?

Templates are a powerful feature in Knockout.js, especially when you want to render dynamic or reusable HTML content based on your data. Let's understand this

Templates in Knockout.js let you define pieces of HTML that are rendered dynamically using your view model data.

They're most useful when:

1. You're displaying **repeating structures** (like cards or rows).
2. You want to **reuse markup**.
3. You want **more control** over how sections of your UI are rendered.

## Basic Syntax

```html
<!-- Your template -->
<script type="text/html" id="person-template">
  <div>
    <strong data-bind="text: name"></strong>
    <span data-bind="text: age"></span>
  </div>
</script>

<!-- Where the template will be used -->
<div data-bind="template: { name: 'person-template', data: selectedPerson }"></div>
```

## Template Binding Properties

| Property | Description |
| --- | --- |
| `name` | The ID of the `<script>` template |
| `data` | The data context passed to the template |
| `foreach` | Used to repeat the template over a list |
| `if` / `ifnot` | Conditionally render the template |

**Example: Template with** `foreach`

```html
<script type="text/html" id="fruit-template">
  <li data-bind="text: name"></li>
</script>

<ul data-bind="template: { name: 'fruit-template', foreach: fruits }"></ul>
```

```javascript
function ViewModel() {
  this.fruits = ko.observableArray([
    { name: "Apple" },
    { name: "Banana" },
    { name: "Cherry" }
  ]);
}

ko.applyBindings(new ViewModel());
```

`fruits` is an array of objects, and each object gets passed into the template as `$data`.

## Using Anonymous Templates (inline HTML)

```html
<div data-bind="template: { foreach: items }">
  <p data-bind="text: $data"></p>
</div>
```

No need for an external `<script>` tag. This is useful for quick layouts!

## Inside Templates, You Can Use:

1. `$data`, `$parent`, `$root`
2. Regular bindings like `text`, `click`, `visible`, etc.
3. `templateOptions` for more complex use cases

## Bonus: Switch templates dynamically

```html
<!-- two template definitions -->
<script type="text/html" id="admin-template">Admin: <span data-bind="text: name"></span></script>
<script type="text/html" id="user-template">User: <span data-bind="text: name"></span></script>

<!-- render different template based on role -->
<div data-bind="template: { name: templateName, data: person }"></div>
```

```javascript
this.templateName = ko.computed(() => {
  return this.person().role === "admin" ? "admin-template" : "user-template";
});
```

#### Summary

| Concept | Description |
| --- | --- |
| `template` binding | Renders HTML based on a view model |
| `name` | Refers to a script template by ID |
| `data` | Data context to use in the template |
| `foreach` | Loops through an array to render items |
| Inline templates | Supported using anonymous binding containers |

## Answers

### Answer by ICSM Computer

Templates are a powerful feature in Knockout.js, especially when you want to render dynamic or reusable HTML content based on your data. Let's understand this

Templates in Knockout.js let you define pieces of HTML that are rendered dynamically using your view model data.

They're most useful when:

1. You're displaying **repeating structures** (like cards or rows).
2. You want to **reuse markup**.
3. You want **more control** over how sections of your UI are rendered.

## Basic Syntax

```html
<!-- Your template -->
<script type="text/html" id="person-template">
  <div>
    <strong data-bind="text: name"></strong>
    <span data-bind="text: age"></span>
  </div>
</script>

<!-- Where the template will be used -->
<div data-bind="template: { name: 'person-template', data: selectedPerson }"></div>
```

## Template Binding Properties

| Property | Description |
| --- | --- |
| `name` | The ID of the `<script>` template |
| `data` | The data context passed to the template |
| `foreach` | Used to repeat the template over a list |
| `if` / `ifnot` | Conditionally render the template |

**Example: Template with** `foreach`

```html
<script type="text/html" id="fruit-template">
  <li data-bind="text: name"></li>
</script>

<ul data-bind="template: { name: 'fruit-template', foreach: fruits }"></ul>
```

```javascript
function ViewModel() {
  this.fruits = ko.observableArray([
    { name: "Apple" },
    { name: "Banana" },
    { name: "Cherry" }
  ]);
}

ko.applyBindings(new ViewModel());
```

`fruits` is an array of objects, and each object gets passed into the template as `$data`.

## Using Anonymous Templates (inline HTML)

```html
<div data-bind="template: { foreach: items }">
  <p data-bind="text: $data"></p>
</div>
```

No need for an external `<script>` tag. This is useful for quick layouts!

## Inside Templates, You Can Use:

1. `$data`, `$parent`, `$root`
2. Regular bindings like `text`, `click`, `visible`, etc.
3. `templateOptions` for more complex use cases

## Bonus: Switch templates dynamically

```html
<!-- two template definitions -->
<script type="text/html" id="admin-template">Admin: <span data-bind="text: name"></span></script>
<script type="text/html" id="user-template">User: <span data-bind="text: name"></span></script>

<!-- render different template based on role -->
<div data-bind="template: { name: templateName, data: person }"></div>
```

```javascript
this.templateName = ko.computed(() => {
  return this.person().role === "admin" ? "admin-template" : "user-template";
});
```

#### Summary

| Concept | Description |
| --- | --- |
| `template` binding | Renders HTML based on a view model |
| `name` | Refers to a script template by ID |
| `data` | Data context to use in the template |
| `foreach` | Loops through an array to render items |
| Inline templates | Supported using anonymous binding containers |


---

Original Source: https://www.mindstick.com/interview/34049/what-are-templates-in-knockout-js

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.