jtemple
v1.1.1
Published
Fastest template engine for load json data and print in your html structure without any logic and complex scripting. Just 1 line code will save your lots of time.
Downloads
9
Maintainers
Readme
jtemple
jtemple is a widget template engine, to achieve small tasks in 1 line. No technical knowledge required. If you are familiar with HTML and JQuery then you are champion of jtemple. It will save your lots of time and do many tasks for you.
Dependencies
JQuery
Demo
Click here for demo at the end of page
Install by Node.js
npm install jtemple
Install by bower
bower install jtemple
Usage
Include in your project
<script src="dist/jtemple.min.js" type="text/javascript"></script>
Options
data : {JSON}
template : {Selector data attribute (data-jtemple="template-name")}
target : {Selector where you want this template to be published}
publish (Default: replace): {replace, append, prepend} (append: put content at end of container) (prepend: put content at start)
Syntax jtemple syntax is very simple as described below: "#" hash sign is indication of statement start and ";" semicolon sign is use for end line. Principle of scripting is must close opened statement, with jtemple you can close statement with #end{statement};. You don't need to use #; signs except statements.
jtemple supports #for();, #if();, #elseif(); and #else; statement and conditions as illustrated below.
#for();
<div class="row">
#for(var z=0; z < data.length; z++);
<div class="col-md-3">
....... Your code here
</div>
#endfor;
</div>
#if();
#if(data.length > 0);
<div class="row">
<div class="col-md-3">
....... Your code here
</div>
</div>
#endif;
</div>
#elseif();
#if(data.length > 1);
<div class="row">
<div class="col-md-3">
....... Your code here
</div>
</div>
#elseif(data.length <= 1);
<div class="row">
<div class="col-md-3">
....... Your code here
</div>
</div>
#endif;
</div>
#else;
#if(data.length > 1);
<div class="row">
<div class="col-md-3">
....... Your code here
</div>
</div>
#else;
<div class="row">
<div class="col-md-3">
....... Your code here
</div>
</div>
#endif;
</div>
{#data.variable#} For print JSON value in your template "data" is main container of your JSON data. So, use it like below illustration
<div class="row">
<div class="col-md-3">
{#data.name#}, {#data.age#}, {#data.gender#} and so on....
</div>
</div>
</div>
Example
Template structure
<div data-jtemple="template">
#for(var z=0; z < data.length; z++);
<div class="row">
#for(var y=0; y < data[z].length; y++);
<div class="col-md-3">
<input type="radio" name="category" value="{#data[z][y][\'id\']#}" id="category-{#data[z][y].id#}">
<label for="category-{#data[z][y].id#}">
<img src="{#data[z][y].icon#}" alt="{#data[z][y].title#}" />
<span class="title">{#data[z][y].title#}</span>
</label>
</div>
#endif;
</div>
#endfor;
</div>
Tell jtemple to render template
<div id="jtemple-output"></div>
<script type="text/javascript">
$('#jtemple-output').jtemple({
data : {JSON},
template : 'template'
});
</script>
Contributors are welcome.