Hi, long time no see...
I created the very simple module called "template2Html" for JavaScript to create the HTML String from "template" String.
As you can see below, this module can converts the template string to HTML:
From:
"${id}<div>${name}</div><div>${age}</div><div>${gender}</div>"To:
1<div>john</div><div>32</div><div>man</div>
When parameters like below are given.
{id: 1, name: 'john', age: 281, gender: 'men'}The usage of the template2Html are like below:
var template = "<div>${name}</div><div>${age}</div><div>${gender}</div>";
var params = {
name: 'john',
age: 281,
gender: 'man',
};
// generate HTML
var html = template2Html(template, params);Fixed problem by the scripts
As you know, modern web application requires developers to create more and more HTMLs by JavaScripts.
When we create the HTML in native JavaScript, we have to write scripts like below:
id + '<div>' + name + '</div><div>' + age + '</div><div>' + gender + '</div>'
It's very mess and annoying. HTML often use double quote, in fact its very hard to read and write.
More complicated the HTML become, harder to read and write the scripts.
'<div style="top: ' + $(window).scrollTop() + 'px;"><iframe class="' + overlayClass + '" scrolling="no" frameborder="0" style="' +
'width: ' + $(document).width() + 'px; height: ' + $(document).height() + 'px; ' +
'z-index: 999; display: block; background-color: black; opacity: 0.5;' +
'"></iframe></div>'
It can become simpler.
template2Html(
'<div style="top:${top}px;"><iframe class="${overlayClass}" scrolling="no" frameborder="0" style="width:${width}px; height:${height}px; z-index: 999; display: block; background-color: black; opacity: 0.5;"></iframe></div>',
{
top: $(window).scrollTop(),
overlayClass: 'overlay',
width: $(document).width(),
heidht: $(document).height()
}
);
This scripts I introduced to you does not only make easy to write scripts and make easy to read, also it separate data from HTML. (Good news for designers!)
It could make object more lighter.
Source Codes
The source code of the template2Html are like below:
/**
* Crate html from template to separate data from html.
* It converts the template string to html.
* From : "${id}<div>${name}</div><div>${age}</div><div>${gender}</div>"
* To : 1<div>john</div><div>281</div><div>man</div>
* when parameters like below are given.
* {id: 1, name: 'john', age: 281, gender: 'men'}
*
* Author Haida
* Version 0.0.1
* @param {String} templateString
* @param {Object} Hash containing parameter.
* @return {String} Return html string.
*/
/*
//---------------- For testing the template2Html ---------------- //
function testTemplate2Html(templateString) {
var params = {
id: 1,
name: 'whoisme',
age: 281,
gender: 'man',
mail: 'haida@example.com'
};
console.log(template2Html(templateString, params));
};
testTemplate2Html("<div>${name}</div><div>${age}</div><div>${gender}</div>");
testTemplate2Html("${id}<div>${name}</div><div>${age}</div><div>${gender}</div>");
testTemplate2Html("<div>${name}</div><div>${age}</div><div>${gender}</div>${mail}");
testTemplate2Html('<div><span>${name}</span><a href="#">Add</a></div>');
testTemplate2Html('<li>${name}</li>');
//---------------- For testing the template2Html ---------------- //
*/
var template2Html = function (templateString, params) {
var __h = function (template, html) {
/* "<div>${name}</div><div>${age}</div><div>${mine}</div>" >> ["${name}", "name"] */
var _match = template.match(/\$\{([^\s\}]+)\}/);
if (_match != null) {
var _idx = template.indexOf(_match[0]);
html += template.substr(0, _idx);
html += params[_match[1]]; // params
return __h(template.substr(_idx + _match[0].length), html);
}
return html + template;
};
return __h(templateString, '');
};
Any comments and advice to improve this scripts are welcome.
Thank you for your reading.
