interview

Home / DeveloperSection / Interviews / How does Knockout.js handle templating?

Ask Question
Ashutosh Kumar Verma

Ashutosh Kumar Verma

Follow
Hi! This is Ashutosh Kumar Verma. I am a software developer at MindStick Software Pvt Ltd since 2021. I have added some new and interesting features to the MindStick website like a story section, audio section, and merge profile feature on MindStick subdomains, etc. I love coding and I have good knowledge of SQL Database.

Can you answer this question?

Answer

1 Answers

Ashutosh Kumar Verma

Ashutosh Kumar Verma

28-Jun-2024

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.

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

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

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

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

MindStick Training

Liked By