Micro template engine
Metro UI contains micro template engine.
About
Metro UI contains micro template engine.
This feature specified in function Metro.template
.
The function takes 2 parameters: template
as string and vars
defined as object.
Keys supported: var
, if
, for
, else
, switch
, case
, break
.
Example
html
<div id="template_result"></div>
javascript
var template =
'My skills:' +
'
' +
'<%if(this.showSkills) {%>' +
'' +
'<%for(var i = 0; i < this.skills.length; i++) {%>' +
'- <%this.skills[i]%>
' +
'<%}%>' +
'
' +
'
Total: <%this.skills.length%> main skills' +
'<%} else {%>' +
'none
' +
'<%}%>';
var result = Metro.template(template, {
skills: [
"javascript",
"html",
"css",
"php",
"oracle",
"mysql",
"java",
"pascal",
"c/c++",
"kotlin"
],
showSkills: true
});
$("#template_result").html(result);
Result
<div id="template_result">
My skills:
<hr>
<ul>
<li>javascript</li>
<li>html</li>
<li>css</li>
<li>php</li>
<li>oracle</li>
<li>mysql</li>
<li>java</li>
<li>pascal</li>
<li>c/c++</li>
<li>kotlin</li>
</ul>
<br>
<strong>Total: </strong>10 main skills
</div>