Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
John Resig's Micro Template with changed tags from <%=, %> into more mustache-esque {{= and }}
// 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;
};
})();
(function(){var a={};this.tmpl=function b(c,d){var e=!/\W/.test(c)?a[c]=a[c]||b(document.getElementById(c).innerHTML):new Function("obj","var p=[],print=function(){p.push.apply(p,arguments);};"+"with(obj){p.push('"+c.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('');");return d?e(d):e}})()
@topliceanu

This comment has been minimized.

Copy link
Owner Author

@topliceanu topliceanu commented Dec 30, 2011

I needed a light-weight template engine for a bookmarklet i'm building.
John's Resig Micro-Template seemed the perfect solution. Alas i needed to change the tags because of conflicts with my server-side templating.
I wrote a stack overflow answer on changing the tags in Micro-Template to whatever you want: http://stackoverflow.com/a/8669317/993508

@yairEO

This comment has been minimized.

Copy link

@yairEO yairEO commented Mar 24, 2014

I have modified the returned value to:

return data ? fn( data ).replace( new RegExp( "\>[\n\t ]+\<" , "g" ) , "><" ) : fn;

to minify the output, striping unwanted whitespace

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment