complex template vs. concat

Benchmark created by garann means on September 16, 2010

Preparation HTML

<div id="memberProfile"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://github.com/nje/jquery-tmpl/raw/master/jquery.tmpl.js"></script>

<script type="text/html" id="tmplUser">
<h1>${firstName} ${lastName}</h1>
{{if premium}}
        <b>Premium User!</b>
{{/if}}
<h2>Order History</h2>
<div class="orders">
{{each orders}}
        ${$value.number}
        ${$value.title}
        {{if premium}}
                <a href="premiumReturn.html">Return free</a>
        {{else}}
                <a href="return.html">Return (you pay shipping)</a>
        {{/if}}
        <br/>
{{/each}}
</div>
</script>
 
<script>
  var data = {
   firstName: "Jane",
   lastName: "Doe",
   premium: true,
   userID: 9999000,
   orders: [{
    number: 321,
    title: "Mule Variations"
   },
   {
    number: 543,
    title: "Library Nation"
   }]
  };
</script>

Test runner

$("#memberProfile").html($("#tmplUser").tmpl(data));

var markup = '<h1>' + data.firstName + ' ' + data.lastName + '</h1>';
if (data.premium) markup += '<b>Premium User!</b>';
markup += '<h2>Order History</h2> <div class="orders">';
$.each(data.orders, function() {
 var o = this;
 markup += o.number + ' ' + o.title;
 markup += data.premium ? '<a href="premiumReturn.html">Return free</a>' : '<a href="return.html">Return (you pay shipping)</a>';
 markup += '<br/>';
});
markup += '</div>';
$("#memberProfile").html(markup);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by garann means on September 16, 2010
• Revision 2: published by garann means on September 16, 2010
• Revision 4: published by garann means on September 16, 2010
• Revision 7: published on June 17, 2011
• Revision 9: published on August 4, 2011