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