I'm a huge fan of templates in that I always want to separate my view from my code. But I don't like to include hundreds of kilobytes of some library just to get templating - so I made my own in a few lines which I can just copy into any project.
The most basic usage is to pass it data and a template and get the result:
microTemplate({name:'Jack'}, '<h1>Hello {{name}}</h1>');
This will return:
<h1>Hello Jack</h1>
Now there are different ways of using it. You can specify a DOM element which contains your template so if you have this in your HTML:
<div id="op"><h1>Hello {{name}}</h1></div>
You can just do:
microTemplate({name:'Jack'}, $('#op')[0]);
This will automatically write the result back into your div.
It supports arrays so:
var friends = [{name:'Jack'},{name:'Jill'}];
microTemplate(friends, '<h1>Hello {{name}}</h1>', $('#op3')[0]);
Will result in:
<h1>Hello Jack</h1>
<h1>Hello Jill</h1>
If you want a table or an ordered list you'll need to specify header and footer:
microTemplate(friends, '<li>{{name}}</li>', $('#op4')[0], '<ol>', '</ol>');
Which will result in:
<ol>
<li>Jack</li>
<li>Jill</li>
</ol>
I think it's awesome!
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function() {
microTemplate({name:'Jack'}, $('#op')[0]);
microTemplate({name:'Jack'}, '<h1>Hello {{name}}</h1>', $('#op2')[0]);
microTemplate([{name:'Jack'},{name:'>>Jill<<'}], '<h1>Hello {{name}}</h1>', $('#op3')[0]);
microTemplate([{name:'Jack'},{name:'Jill'}], '<li>{{name}}</li>', $('#op4')[0], '<ol>', '</ol>');
});
function microTemplate(data, temp, el, head, foot) {
if (typeof temp.innerHTML=='string') {el=temp;temp=temp.innerHTML;}
data = [].concat(data);
var res = head||'';
for (var i in data) {
res += temp;
for (var f in data[i]) {
res = res.replace(new RegExp('{{{'+f+'}}}', 'ig'), data[i][f]);
res = res.replace(new RegExp('{{'+f+'}}', 'ig'), data[i][f].replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'));
}
}
res += foot||'';
if (el && typeof el.innerHTML == 'string') el.innerHTML = res;
return res;
}
</script>
</head>
<body>
<div id="op"><h1>Hello {{name}}</h1></div>
<div id="op2"></div>
<div id="op3"></div>
<div id="op4"></div>
</body>
</html>
Wednesday, December 19, 2012
Saturday, December 15, 2012
ssiJS: Server Side Includes on the Client
I cut my teeth on classic ASP where you build applications by including various blocks using SSI (server-side include) syntax. If you wanted to include common content (e.g. branding or a copyright statement) inside your <body> you would include it like this:
<!-- #include file="copyright.asp" -->
Aside from <iframe> there is no way to include content from other sites using HTML. You need JavaScript so I wrote a 3-liner jQuery script which does just that. Consider this HTML:
<div class="ssi" data-url="copyright.html"></div>
Add the following JavaScript to your $(function(){}); and you'll have client side includes:
$.each($('div.ssi'), function(a,b) {
$(b).load(b.getAttribute('data-url'));
});
What does this do? It iterates through all divs with the class 'ssi' and loads their content asynchronously from the url specified in their 'data-url' attribute. I think this is neat.
Full source:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function() {
$.each($('div.ssi'), function(a,b) {
$(b).load(b.getAttribute('data-url'));
});
});
</script>
</head>
<body>
<div class="ssi" data-url="a.html"></div>
<div class="ssi" data-url="b.html"></div>
</body>
</html>
<!-- #include file="copyright.asp" -->
Aside from <iframe> there is no way to include content from other sites using HTML. You need JavaScript so I wrote a 3-liner jQuery script which does just that. Consider this HTML:
<div class="ssi" data-url="copyright.html"></div>
Add the following JavaScript to your $(function(){}); and you'll have client side includes:
$.each($('div.ssi'), function(a,b) {
$(b).load(b.getAttribute('data-url'));
});
What does this do? It iterates through all divs with the class 'ssi' and loads their content asynchronously from the url specified in their 'data-url' attribute. I think this is neat.
Full source:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function() {
$.each($('div.ssi'), function(a,b) {
$(b).load(b.getAttribute('data-url'));
});
});
</script>
</head>
<body>
<div class="ssi" data-url="a.html"></div>
<div class="ssi" data-url="b.html"></div>
</body>
</html>
Subscribe to:
Posts (Atom)