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/jquery.min.js" >
</script >
<script src ="http://ajax.cdnjs.com/ajax/libs/mustache.js/0.7.0/mustache.min.js" >
</script >
<script src ="http://borismoore.github.com/jsrender/jsrender.js" >
</script >
<script src ="https://raw.github.com/documentcloud/underscore/master/underscore-min.js" >
</script >
<script src ="https://raw.github.com/olado/doT/master/doT.min.js" >
</script >
<script src ="https://raw.github.com/tenbits/MaskJS/master/lib/maskjs.js" >
</script >
<script src ="https://raw.github.com/linkedin/dustjs/master/dist/dust-full-1.1.1.js" >
</script >
<script src ="https://raw.github.com/aefxx/jQote2/master/jquery.jqote2.min.js" >
</script >
<script src ="https://raw.github.com/twitter/hogan.js/master/web/builds/2.0.0/hogan-2.0.0.min.js" >
</script >
<script src ="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js" >
</script >
<script >
window.sharedVariables = {
header: "Header",
header2: "Header2",
header3: "Header3",
header4: "Header4",
header5: "Header5",
header6: "Header6",
list: ['1000000000', '2', '3', '4', '5', '6', '7', '8', '9', '10']
};
window.maskTemplateRaw = "div { \
h1.header > '#{header}'\
h2.header2 > '#{header2}'\
h3.header3 > '#{header3}'\
h4.header4 > '#{header4}'\
h5.header5 > '#{header5}'\
h6.header6 > '#{header6}'\
ul.list > list value='list' > li.item > '#{.}'\
}";
window.maskDom = mask.compile(maskTemplateRaw)
//JsRender compiled template (no encoding)
window.jsRenderTemplateRaw = "<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}}<li class ='item' > {{:#data}}</li > {{/for}}</ul > </div > ";
window.jsRenderTemplate = $.templates(jsRenderTemplateRaw);
window.mustacheTemplateRaw = "<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' > {{#list}}<li class ='item' > {{{.}}}</li > {{/list}}</ul > </div > ";
window.hoganTemplate = Hogan.compile(mustacheTemplateRaw);
window.underscoreTemplateRaw = "<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 (var i = 0, l = list.length; i < l; i++) { %><li class ='item' > <%= list[i] %></li > <% } %></ul > </div > ";
window.underscoreTemplate = _.template(underscoreTemplateRaw);
window.underscoreTemplateNoWithRaw = "<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.underscoreTemplateNoWith = _.template(underscoreTemplateNoWithRaw, null, {
variable: 'data'
});
window.doTtemplateRaw = "<div > <h1 class ='header' > {{=it.header}}</h1 > <h2 class ='header2' > {{=it.header2}}</h2 > <h3 class ='header3' > {{=it.header3}}</h3 > <h4 class ='header4' > {{=it.header4}}</h4 > <h5 class ='header5' > {{=it.header5}}</h5 > <h6 class ='header6' > {{=it.header6}}</h6 > <ul class ='list' > {{ for (var i=0,l=it.list.length;i<l;i++) { }}<li class ='item' > {{=it.list[i]}}</li > {{ } }}</ul > </div > ";
window.doTtemplate = doT.template(doTtemplateRaw);
window.dustTemplateRaw = "<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' > {#list}<li class ='item' > {.}</li > {/list}</ul > </div > ";
window.dustTemplate = dust.compile(dustTemplateRaw, 'tpl');
dust.loadSource(dustTemplate);
window.jqote_tmpl = "<div > <h1 class ='header' > <%= this.header %></h1 > <h2 class ='header2' > <%= this.header2 %></h2 > <h3 class ='header3' > <%= this.header3 %></h3 > <h4 class ='header4' > <%= this.header4 %></h4 > <h5 class ='header5' > <%= this.header5 %></h5 > <h6 class ='header6' > <%= this.header6 %></h6 > <ul class ='list' > <% for (var n = 0, l = this.list.length; n < l; n++) { %><li class ='item' > <%= this.list[n] %></li > <% } %></ul > </div > ";
window.jqote2 = $.jqotec(jqote_tmpl);
window.jQueryTemplate = "<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' > {{each list}}<li class ='item' > ${$value}</li > {{/each}}</ul > </div > ";
$.template('jQueryTemplate', jQueryTemplate);
</script >
<div id ="template" style ="" >
</div >
Setup JS
Teardown JS
Test cases
Test #1 Title *
Async
Code * $('#template' ).empty ().append (doTtemplate (sharedVariables));
++sharedVariables.list [0 ];
Test #2 Title *
Async
Code * $('#template' ).empty ().append (underscoreTemplate (sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code *
var fn = _.template (underscoreTemplateNoWithRaw, null , {
variable : 'data'
});
$('#template' ).empty ().append (fn (sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append (jsRenderTemplate.render (sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append (Mustache .render (mustacheTemplateRaw, sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append (mask.renderDom (maskDom, sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append (mask.renderHtml (maskDom, sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code * dust.render ('tpl' , sharedVariables, function (err, html ) {
if (html) $('#template' ).empty ().append (html);
});
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append (
jqote2.call (sharedVariables, 0 , 0 , [sharedVariables], jqote2));
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append (hoganTemplate.render (sharedVariables));
++sharedVariables.list [0 ];
Title *
Async
Code * $('#template' ).empty ().append ($.tmpl ('jQueryTemplate' , sharedVariables));
++sharedVariables.list [0 ];