complex template vs. concat (v4)

Revision 4 of this 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">
<div class="user" style="overflow:hidden;">
<h1>${firstName} ${lastName}</h1>
{{if premium}}
        <b style="float:right;">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>
</div>
</script>

<script>
  var data = [{
   firstName: "Amy",
   lastName: "Apple",
   premium: true,
   userID: 9999000,
   orders: [{
    number: 321,
    title: "Mule Variations"
   },
   {
    number: 543,
    title: "Library Nation"
   }]
  },
  {
   firstName: "Benjamin",
   lastName: "Brown",
   premium: false,
   userID: 9999001,
   orders: [{
    number: 432,
    title: "Hissing Fauna Are You the Destroyer"
   },
   {
    number: 76,
    title: "The Long March"
   }]
  },
  {
   firstName: "Chelsea",
   lastName: "Chesterfield",
   premium: false,
   userID: 9999002,
   orders: [{
    number: 98,
    title: "Myths of the Near Future"
   }]
  },
  {
   firstName: "Daphne",
   lastName: "Dobbins",
   premium: true,
   userID: 9999003,
   orders: [{
    number: 12,
    title: "This is Hardcore"
   },
   {
    number: 765,
    title: "In Rainbows"
   }]
  },
  {
   firstName: "Eddie",
   lastName: "Eastman",
   premium: true,
   userID: 9999004,
   orders: [{
    number: 323,
    title: "Bone Machine"
   }]
  }];
  
  var templateString = document.getElementById("tmplUser").innerHTML;
  $.template("savedTmpl", templateString);
</script>

Test runner

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

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

var markup = new Array();
for (var user in data) {
 markup.push('<div class="user" style="overflow:hidden;"><h1>' + user.firstName + ' ' + user.lastName + '</h1>');
 if (user.premium) markup.push('<b style="float:right;">Premium User!</b>');
 markup.push('<h2>Order History</h2> <div class="orders">');
 for (var o in user.orders) {
  markup.push(o.number + ' ' + o.title);
  markup.push(user.premium ? '<a href="premiumReturn.html">Return free</a>' : '<a href="return.html">Return (you pay shipping)</a>');
  markup.push('<br/>');
 }
 markup.push('</div></div>');
}
$("#memberProfile").html(markup.join(""));

$("#memberProfile").html($.tmpl("savedTmpl", data));

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