Preparation Code Preparation HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" > </script >
<script src ="http://foo123.github.io/libs/Contemplate-0.8.1.min.js" > </script >
<script src ="https://rawgithub.com/danactive/js-template-engines-performance/master/lib/kendo.core.min.2013.1.319.js" > </script >
<script type ="text/x-kendo-template" id ="kendoUIextTemplate" > <div > <h1 class ='header' > #= data.header #</h1 > <h2 class ='header2' > #= data.header2 #</h2 > <h3 class ='header3' > #= data.header3 #</h3 > <h4 class ='header4' > #= data.header4 #</h4 > <h5 class ='header5' > #= data.header5 #</h5 > <h6 class ='header6' > #= data.header6 #</h6 > <ul class ='list' > # for (var i = 0, l = data.list.length; i < l; i++) { #<li class ='item' > #= data.list[i] #</li > # } #</ul > </div > </script >
<script type ="text/x-contemplate" id ="contemplateextTemplate" >
<# #>
<div > <h1 class ='header' > <# $header #></h1 > <h2 class ='header2' > <# $header2 #></h2 > <h3 class ='header3' > <# $header3 #></h3 > <h4 class ='header4' > <# $header4 #></h4 > <h5 class ='header5' > <# $header5 #></h5 > <h6 class ='header6' > <# $header6 #></h6 > <ul class ='list' > <# %for($list as $item) #><li class ='item' > <# $item #></li > <# %endfor() #></ul > </div > </script >
<script >
window .sharedVariables = {
header : "Header" ,
header2 : "Header2" ,
header3 : "Header3" ,
header4 : "Header4" ,
header5 : "Header5" ,
header6 : "Header6" ,
list : ['1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , '10' ]
};
function tmpl2 (str ) {
var strFunc =
"var p=[];" +
"p.push('" +
str.replace (/[\r\t\n]/g , " " )
.replace (/'(?=[^#]*#>)/g , "\t" )
.split ("'" ).join ("\\'" )
.split ("\t" ).join ("'" )
.replace (/<#=(.+?)#>/g , "',$1,'" )
.split ("<#" ).join ("');" )
.split ("#>" ).join ("p.push('" )
+ "');return p.join('');" ;
return new Function ("data" , strFunc);
}
window .resig = {render : tmpl2 ("<div><h1 class='header'><#= data.header #></h1><h2 class='header2'><#= data.header2 #></h2><h3 class='header3'><#= data.header3 #></h3><h4 class='header4'><#= data.header4 #></h4><h5 class='header5'><#= data.header5 #></h5><h6 class='header6'><#= data.header6 #></h6><ul class='list'><# for (var i = 0, l = data.list.length; i < l; i++) { #><li class='item'><#= data.list[i] #></li><# } #></ul></div>" )};
window .kendoui = {render : kendo.template ( document .getElementById ('kendoUIextTemplate' ).innerHTML , {useWithBlock : false })};
Contemplate .add ({
'test' : "#contemplateextTemplate"
});
window .contemplate = Contemplate .tpl ( 'test' );
</script >
Setup JS
Teardown JS