Wednesday, April 20, 2016

Mustache Js -Get Started

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


No comments:

Post a Comment