I must admit that it has always been heavy and boring to integrate resources not programmed by me in my work stack, so many of the functions and utilities are my responsibility.
Some time ago we were hired by a client to create a project that required a panel to create and update content, a mobile application and a web application. One of the strengths of this project was the lists since it involved a product catalog.
I’ve been reviewing various templates engines for the front-end, including EJS , my favorite when developing for NodeJS. I tried several more that I did not know but they all agreed on the same point: They offered much more than what I needed.
Hence xTemplateDOM was born, a function written in JavaScript vanilla:
function xTemplateDOM (parms)
{
var template_selector = parms['template_selector'] || '';
var template_string = parms['template_string'] || '';
var data = parms['data'] || [];
var htm = '', tpl = '';
data = (Array.isArray(data)) ? data : [data];
if ( (template_string || template_selector) && (data.length > 0) )
{
if ( template_string )
{
tpl = String(template_string).replace(/(\r\n|\n|\r|\s+)/gm,' ');
} else {
tpl = String(document.querySelector(template_selector).innerHTML).replace(/(\r\n|\n|\r|\s+)/gm,' ');
};
tpl = tpl.replace(/(@\{)\s*(\S+)\s*(?=})/img,'$1$2');
for (var i = 0, c = data.length; i < c; i++)
{
var row = data[i], str = tpl;
for (var k in row)
{
var key = k, val = row[k];
var rgx = new RegExp('@{' + key + '}','img');
str = str.replace(rgx,val);
};
htm += str + '\n';
};
};
return htm;
};
Integrating it into the project is very simple. We add the template portion as part of the DOM but hidden with a scripttag:
<!DOCTYPE html>
<html>
<head>
<title>My xTemplateDOM test</title>
</head>
<body>
<ul id="box">
...
</ul>
<script type="text/templatedom" id="template-profile">
<li data-profileid="@{profileid}">
<div>
<span>Firstname:</span>
<span>@{firstname}</span>
</div>
<div>
<span>Lastname:</span>
<span>@{lastname}</span>
</div>
</li>
</script>
</body>
</html>
Finally we call the template and feed it with the data from our list:
var actors = [
{
profileid: 3321,
firstname: 'Bruce',
lastname: 'Willis'
},
{
profileid: 4318,
firstname: 'Angelina',
lastname: 'Jolie'
},
{
profileid: 7269,
firstname: 'Robert',
lastname: 'De Niro'
}
];
document.querySelector('#box').innerHTML = xTemplateDOM({
template_selector: '#template-profile',
data: actors
});
We can also pass the template as part of the call without having to touch the DOM:
var actors = [
{
profileid: 3321,
firstname: 'Bruce',
lastname: 'Willis'
},
{
profileid: 4318,
firstname: 'Angelina',
lastname: 'Jolie'
},
{
profileid: 7269,
firstname: 'Robert',
lastname: 'De Niro'
}
];
document.querySelector('#box').innerHTML = xTemplateDOM({
template_string: '<li data-profileid="@{profileid}">@{firstname} @{lastname}</li>',
data: actors
});
In addition to the list of objects, we can also pass the data of only one object. It is obvious, because not all the time we need to feed lists.
document.querySelector('#box').innerHTML = xTemplateDOM({
template_selector: '#template-profile',
data: {
profileid: 7269,
firstname: 'Robert',
lastname: 'De Niro'
}
});
document.querySelector('#box').innerHTML = xTemplateDOM({
template_string: '<li data-profileid="@{profileid}">@{firstname} @{lastname}</li>',
data: {
profileid: 7269,
firstname: 'Robert',
lastname: 'De Niro'
}
});
I think xTemplateDOM is simple to implement but if you have any questions you can leave them in the comments, I will gladly answer you.