jQuery Templates vs iCanHaz

Benchmark created by Ivan Torres on June 7, 2011

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js"></script>
<script type="text/javascript" src="https://raw.github.com/andyet/ICanHaz.js/master/ICanHaz.js"></script>

<script type="text/html" id="user">
    <li>
        <p>Hi I&apos;m <a href="http://twitter.com/{{ twitter }}">{{ name }}</a></p>
        <p>I work for {{ employer }} as a {{ title }}.</p>
    </li>
</script>

<script type="text/x-jquery-tmpl" id="userTemplate">
    <li>
        <p>Hi I&apos;m <a href="http://twitter.com/${twitter}">${name}</a></p>
        <p>I work for ${employer} as a ${title}.</p>
    </li>
</script>
<script>
  var cachedTemplateJQuery;
  
  var userDataJQ = {
    name     : "Ivan Torres (jQuery)",
    twitter  : "mexpolk",
    employer : "Get Satisfaction",
    title    : "Software Developer"
  };
  
  var userDataICH = {
    name     : "Ivan Torres (iCanHaz)",
    twitter  : "mexpolk",
    employer : "Get Satisfaction",
    title    : "Software Developer"
  };
</script>

Setup

cachedTemplateJQuery = $('#userTemplate');

Test runner

$(document).ready(function () {
  cachedTemplateJQuery.tmpl(userDataJQ);
});

$(document).ready(function () {
  ich.user(userDataICH);
});

Revisions

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

• Revision 1: published by Ivan Torres on June 7, 2011