complex template vs. concat (v2)

Revision 2 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"
   }]
  }];
</script>

Test runner

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

var markup = "";
$.each(data, function() {
 var user = this;
 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">';
 $.each(user.orders, function() {
  var o = this;
  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();
$.each(data, function() {
 var user = this;
 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">');
 $.each(user.orders, function() {
  var o = this;
  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(""));

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