Template test

Benchmark created by aavezel on November 16, 2010

Description

Preparation HTML

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://www.glicky.com/downloads/purejstemplate_jquery.js"></script>
<script>
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};
 
  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
     
      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
       
        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +
       
        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");
   
    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();
</script>
<textarea cols="10" rows="10" id="purejstemplate_template" style="display: none">
<# for(var i=0; i<data.length; i++) { #><span><#=data[i].value#></span><# }#>
</textarea>
<textarea cols="10" rows="10" id="rowtemplate" style="display: none">
<# for(var i=0; i<data.length; i++) { #><td><#=data[i]#></td><# }#>
</textarea>
<script type="text/x-jquery-tmpl" id="microsoft_template">
<span>${value}</span>
</script>        
<script type="text/x-jquery-tmpl" id="microsoft_template2">
{{each elements}}<span>${value}</span>{{/each}}
</script>
<script type="text/html" id="tmpl_template">
<% var l = data.length; for (var i=0;i<l;i++) {%><span><%=data[i]%></span><%}%>
</script>
<div id="out" style="display: none"></div>
<script>
  var elements = [];
  for (var i = 0; i < 1000; i++) elements.push({
   value: i
  });
  $out = $("#out");
</script>

Test runner

$out.empty();
$("#microsoft_template").tmpl(elements).appendTo($out)

$out.empty();
$("#microsoft_template2").tmpl({
 elements: elements
}).appendTo($out);

$out.empty();
$out.pureJSTemplate({
 id: "purejstemplate_template",
 data: elements
});

$out.empty();
for (var i = 0; i < elements.length; i++) {
 $("<span/>").text(elements[i].value).appendTo($out);
}

$out.empty();
var spans = [];
for (var i = 0; i < elements.length; i++) {
 spans.push("<span>" + elements[i].value + "</span>");
}
$out.html(spans.join(""));

$out.empty();
var tmplCached = tmpl('tmpl_template');
$out.append(tmplCached({
 data: elements
}));

Revisions

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

• Revision 1: published by aavezel on November 16, 2010