diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


Javascript templating with SXOOP.template

Walter Higgins —”My own preference is to use a template system that lets you insert snippets of the host language code. SXOOP.template is a tiny javascript templating system that lets you mix snippets of javascript code and html.”

Writing TinyTemplate in Perl was a breeze and the codebase is tiny. I used a similar approach to writing SXOOP.template which resulted in a tiny codebase for the Javascript version too.

What need for Javascript Templating you ask ?

Well, JSON gives Javascript Templating something to do. More and more webservices are supporting JSON.
What’s more; if you combine SXOOP.template with this brilliant XML javascript library, then suddenly javascript templating becomes 1000 times more useful (most existing WebServices use XML). You can mix and combine XML data sources (like the ubiquitous RSS and less well known formats like OPML) and use them to construct Human-readable web-pages without resorting to XSLT.
Continue for more info….

var SXOOP = SXOOP || {};

SXOOP.template = {};

* Does this need explaining ?
SXOOP.template.map = function(array, func)
var result = [];
for (var i = 0;i < array.length; i++){ var mapped ="" func(array[i]); for (var j ="" 0; j < mapped.length; j++){ result.push(mapped[j]); } } return result; };/** * parse a template (supplied as a string), substituting * the supplied object ($_) * the $_ variable refers to the object which was passed into the parse function * of course, all other global variables/functions are accessible too. */sxoop.template.parse ="" function(str,$_) { var singleline ="" str.replace(/[\n\r]/g,""); // innerhtml automatically converts < to < and > to >
singleLine = singleLine.replace(/</g,"<"); singleline ="" singleline.replace(/>/g,">");

* The include function facilitates inclusion of inner templates
* Note: This include function is local to the parse function and will
* override a global include function in the template scope only.
var include = function(elementId){
var included = document.getElementById(elementId).innerHTML;
return SXOOP.template.parse(included,$_);

* Split the template into parts
var parts = SXOOP.template.map(singleLine.split("[:"),function (part){
var result = [];
if (part.match(/:\]/)){
result = part.split(/:\]/g);
result[0] = "[:" + result[0];
result = [part];
return result;
* In firefox the following would suffice instead.
* IE's implementation of split() is broken - doesn't retain captured parts.
* parts = singleLine.split(/(\[:.*?):\]/);
* Process each part
var result = SXOOP.template.map(parts,function (part){
var result = "";
if (part.match(/\[:=/)){
var inner = part.replace(/^\[:=\s*/,"");
return ["theArray.push(" + inner + ");"];
if (part.match(/^\[:/)){
var inner = part.replace(/^\[:/,"");
return [inner];
part = part.replace(/\"/g,"\\\"");
return ["theArray.push(\"" + part + "\");"];
var theArray = [];
var javascript = result.join("\n");
return eval(javascript);



Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...