I came across this super cool “Logic-less” Templating js library called MustacheJS .
Note :By “Logic-less” I mean to say they do not use conditional constructs like if else or looping constructs like for ,foreach and while .
How to Use :
Download the CDN from here https://cdnjs.com/libraries/mustache.js/
or copy this ->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
Now you got to set up your data which you want to display. Typically in Json Format
add that in ur script tag
data = {
name: "Supreet P Hadagali",
Designation:"Module Lead"
};
create a template .
Its a just a string you want to display on your screen
when you want to reference the data and show it on browser , its simple as similar to angular expression. Use double mustache --> {{ }}
Render the HTML
its very simple . we have an inbuilt function called
Mustache.to_html()
overall here is the script code
<script>
var template, data, html;
data = {
name: "Supreet P Hadagali",
Designation:"Module Lead"
};
template = "<h2>Name: {{name}} <br/> Designation : {{Designation}}</h2>";
html = Mustache.to_html(template, data);
document.write(html);
</script>
Note : to_html() is deprecated . you can use render()
run your solution and see the data being displayed
Note :By “Logic-less” I mean to say they do not use conditional constructs like if else or looping constructs like for ,foreach and while .
How to Use :
Download the CDN from here https://cdnjs.com/libraries/mustache.js/
or copy this ->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
Now you got to set up your data which you want to display. Typically in Json Format
add that in ur script tag
data = {
name: "Supreet P Hadagali",
Designation:"Module Lead"
};
create a template .
Its a just a string you want to display on your screen
when you want to reference the data and show it on browser , its simple as similar to angular expression. Use double mustache --> {{ }}
Render the HTML
its very simple . we have an inbuilt function called
Mustache.to_html()
overall here is the script code
<script>
var template, data, html;
data = {
name: "Supreet P Hadagali",
Designation:"Module Lead"
};
template = "<h2>Name: {{name}} <br/> Designation : {{Designation}}</h2>";
html = Mustache.to_html(template, data);
document.write(html);
</script>
Note : to_html() is deprecated . you can use render()
run your solution and see the data being displayed
No comments:
Post a Comment