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:

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

Basic Syntax

<!-- 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

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

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

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)

<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:

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

Bonus: Switch templates dynamically

<!-- 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>

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

interview