Preparation Code Preparation HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) <script src ="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js" > </script >
<script src ="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js" > </script >
<script src ="https://cdnjs.cloudflare.com/ajax/libs/hogan.js/2.0.0/hogan.js" > </script >
<script src ="https://archan937.github.io/templayed.js/templayed.js" > </script >
<script >
!(function (root, undefined ) {
var _isArray = Array .isArray || function (obj ) {
return Object .prototype toString .call (obj) === '[object Array]'
}
function print (value, escape ) {
return typeof value === 'undefined'
? ''
: ( escape && /[&"<>]/ .test (value += '' ) )
? value.replace (/&/g , '&' ).replace (/"/g , '"' ).replace (/</g , '<' ).replace (/>/g , '>' )
: value
}
function get (scope, depth ) {
scope = scope.replace (/^(\.\.\/)+/ , function (all, one ) {
depth -= all.length / one.length
return ''
})
if (depth < 0 ) return "undefined"
if (scope === '.' ) return "s" +depth
var first = scope.match (/^[^.]+/ )[0 ]
var code = ''
while (depth > 0 ) code += "typeof s" +depth +"." +first +" !== 'undefined' ? s" +depth-- +"." +scope +" : "
return code +"s0." +scope
}
function compile (source ) {
var inverted = 0 , depth = 0
var compiled = new Function ("s0" , "print" , "_isArray" , "var out = '" +source
.replace (/\\/g , "\\\\" )
.replace (/'/g , "\\'" )
.replace (/\{\{([\^#/!&]?)([^{\n]+?)\}\}/g , function (a, flag, scope ) {
switch (flag) {
case '^' :
inverted++
return "'; var value = " +get (scope, depth)
+ " ; if (!value || (_isArray(value) && value.length === 0)) { out += '"
case '#' :
return "'; var value = " +get (scope, depth++)
+ " ; var list = value ? _isArray(value) ? value : [value] : []"
+ " ; for (var i=0, len=list.length; i<len; i++) {"
+ " ; var s" +depth +" = list[i]; out += '"
case '/' :
inverted > 0 ? inverted-- : depth--
return "'} out += '"
case '!' :
return ""
case '&' :
return "' +print(" +get (scope, depth) +", false) +'"
default :
return "' +print(" +get (scope, depth) +", true) +'"
}
})
.replace (/\n/g , "\\n" )
+"'; return out" )
var template = function (data ) {
return compiled (data, print, _isArray)
}
return template.render = template
}
compile.compile = compile
if (typeof module !== 'undefined' && module .exports ) {
module .exports = compile
} else if (typeof define === 'function' && define.amd ) {
define ('lt' , compile)
} else {
root['lt' ] = compile
}
})(this )
</script >
Setup JS var tests = [{
template : "<p>My name is {{name}}!</p>" ,
variables : {
name : "Paul Engel"
}
}, {
template : "<p>My name is {{name}}!{{!name}}</p>" ,
variables : {
name : "Paul Engel"
}
}, {
template : "<p>{{html}} {{&html}}</p>" ,
variables : {
html : "<strong>Paul Engel</strong>"
}
}, {
template : "<p>{{html}} {{html}}</p>" ,
variables : {
html : "<strong>Paul Engel</strong>"
}
}, {
template : "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>" ,
variables : {}
}, {
template : "<p>This is shown!{{#show}} Psst, this is never shown{{/show}}</p>" ,
variables : {
show : false
}
}, {
template : "<p>This is shown!{{#shown}} And, this is also shown{{/shown}}</p>" ,
variables : {
shown : true
}
}, {
template : "<p>My name is {{person.first_name}} {{person.last_name}}!</p>" ,
variables : {
person : {
first_name : "Paul" ,
last_name : "Engel"
}
}
}, {
template : "{{name}}<ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}" ,
variables : {
names : []
}
}, {
template : "<p>{{name}}</p><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>{{^names}}Sorry, no people to list!{{/names}}<p>{{name}}</p>" ,
variables : {
name : "Chunk Norris" ,
names : [{
name : "Paul"
}, {
name : "Engel"
}]
}
}, {
template : "<ul>{{#names}}<li>{{.}}{{foo}}</li>{{/names}}</ul>" ,
variables : {
names : ["Paul" , "Engel" ]
}
}, {
template : "<ul>{{#names}}<li>{{fullName}}</li>{{/names}}</ul>" ,
variables : {
names : [{
firstName : "Paul" ,
lastName : "Engel"
}, {
firstName : "Chunk" ,
lastName : "Norris"
}]
}
}];
var compiled = {
"Mustache.js" : [],
"Handlebars.js" : [],
"Hogan.js" : [],
"templayed.js" : [],
"lt" : []
};
for (var i = 0 ; i < tests.length ; i++) {
var template = tests[i].template ;
compiled["Mustache.js" ].push (Mustache .compile (template.replace (/\.\.\//g , "" )));
var Handlebars T = Handlebars .compile (template);
Handlebars T({});
compiled["Handlebars.js" ].push (Handlebars T);
compiled["Hogan.js" ].push (Hogan .compile (template.replace (/\.\.\//g , "" )));
compiled["templayed.js" ].push (templayed (template));
compiled["lt" ].push (lt.compile (template));
}
Teardown JS