When to use JavaScript template engines?

Question

Here is an example of JavaScript template from Ben Nadel's demo single page long-lived AJAX application taken from: [source]

<script id="contact-list-item-template" type="application/template">      <li class="contact clear-fix">              <div class="summary">                     <a class="name">${name}</a>             </div>              <div class="actions">                     <a href="javascript:void( 0 )" class="more">more</a> &nbsp;|&nbsp;                     <a href="#/contacts/edit/${id}" class="edit">edit</a> &nbsp;|&nbsp;                     <a href="#/contacts/delete/${id}" class="delete">delete</a>             </div>              <dl class="details clear-fix">                     <dt>                             name:                     </dt>                     <dd>                             ${name}                     </dd>                     <dt>                             phone:                     </dt>                     <dd>                             ${phone}                     </dd>                     <dt>                             email:                     </dt>                     <dd>                             ${email}                     </dd>             </dl>      </li> 

I want to ask what is the purpose of using a JavaScript template engines like that? Is it for save of the bandwidth? Is it just a matter of Separation of concerns? Will it help in fighting the browser memory leaks problems?

When should I use template engine and when it is easier to go with raw HTML AJAX responses?

Related discussion:

JQuery templating engines

Answer 1

Templating is a good solution in a few scenarios:

• Loading all data from the server especially in rich list displays
• Adding or updating new items in lists
• Anywhere you need to add new complex content to the page
• Anything that requires client side HTML rendering

Source : http://www.west-wind.com/Weblog/posts/509108.aspx