---
title: "How does Knockout.js handle templating?"  
description: "How does Knockout.js handle templating?"  
author: "Ashutosh Patel"  
published: 2024-06-28  
updated: 2024-06-28  
canonical: https://www.mindstick.com/interview/33934/how-does-knockout-js-handle-templating  
category: "knockcout js"  
tags: ["javascript", "knockout.js", "knockout.js template"]  
reading_time: 3 minutes  

---

# How does Knockout.js handle templating?

#### Knockout.js Handle Template

Knockout.js handles templating by providing multiple options that facilitate dynamic generation and HTML manipulation based on the data in your ViewModel.

Here are several type of template binding in knockout.js,

## Template Binding

Template binding allows you to bind the content of an element to a specified template.

```html
<!-- Template definition -->
<script type="text/html" id="my-template">
   <div>
       <h2 data-bind="text: title"></h2>
       <p data-bind="text: content"></p>
   </div>
</script>
<!-- Using the template -->
<div data-bind="template: { name: 'my-template', data: { title: 'Hello', content: 'World' } }"></div>
```

## foreach Binding

The foreach binding allows you to iterate and define on a collection in your ViewModel

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

**if and ifnot Bindings** if and ifnot bindings present a condition to an HTML-based boolean expression in your ViewModel.

```html
<div data-bind="if: isVisible">
   <p>Visible content</p>
</div>
<div data-bind="ifnot: isVisible">
   <p>Hidden content</p>
</div>
```

## with Binding

`with` binding Changes the current binding definition to the specified object, so that you can access the property directly in the nested scope.

```html
<div data-bind="with: user">
   <p>Name: <span data-bind="text: name"></span></p>
   <p>Email: <span data-bind="text: email"></span></p>
</div>
```

**Also, Read:** [Explain Inline vs. External Templates in knockout.js.](https://www.mindstick.com/forum/160794/explain-inline-vs-external-templates-in-knockout-js)

## Answers

### Answer by Ashutosh Patel

#### Knockout.js Handle Template

Knockout.js handles templating by providing multiple options that facilitate dynamic generation and HTML manipulation based on the data in your ViewModel.

Here are several type of template binding in knockout.js,

## Template Binding

Template binding allows you to bind the content of an element to a specified template.

```html
<!-- Template definition -->
<script type="text/html" id="my-template">
   <div>
       <h2 data-bind="text: title"></h2>
       <p data-bind="text: content"></p>
   </div>
</script>
<!-- Using the template -->
<div data-bind="template: { name: 'my-template', data: { title: 'Hello', content: 'World' } }"></div>
```

## foreach Binding

The foreach binding allows you to iterate and define on a collection in your ViewModel

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

**if and ifnot Bindings** if and ifnot bindings present a condition to an HTML-based boolean expression in your ViewModel.

```html
<div data-bind="if: isVisible">
   <p>Visible content</p>
</div>
<div data-bind="ifnot: isVisible">
   <p>Hidden content</p>
</div>
```

## with Binding

`with` binding Changes the current binding definition to the specified object, so that you can access the property directly in the nested scope.

```html
<div data-bind="with: user">
   <p>Name: <span data-bind="text: name"></span></p>
   <p>Email: <span data-bind="text: email"></span></p>
</div>
```

**Also, Read:** [Explain Inline vs. External Templates in knockout.js.](https://www.mindstick.com/forum/160794/explain-inline-vs-external-templates-in-knockout-js)


---

Original Source: https://www.mindstick.com/interview/33934/how-does-knockout-js-handle-templating

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