1. Introduction of mustache HTML template : Mustache is a logic less HTML template. Why logic less? because it does not have if-else conditions or loops.
Mustache is simply a js library that read JSON data and display it using mustache templates.Mustache template use tags to display json data.
Mustache tags are indicated by double curly braces "{{mustache tag}}".
It reduce our efforts in HTML coding because we can use same mustache template again and again.
2. Basic mustache example :
Output : Rahul is from India
step 1 : Add mustache.js in your HTML page. mustache.js can be download from githhub.
step 2 : Create mustache template.
step 3 : Render mustache template and it to HTML element.
As we discuss earlier that mustache used tag to display data from json.Tags are indicated by double curly braces.When we render mustache template, it simply search template tags into json data and display that data. For example here mustache template search {{name}} and {{country}} in jsonData to display.
3. Use of HTML tag in mustache template :
Output : Rahul is from India
we can use HTML tags in mustache template. All HTML tags are escaped by default. If you want to return unescaped HTML tag, use the triple curly braces {{{name}}}. You can also use & to unescape a HTML tag: {{& name}}.
4. Implement conditions in mustache template :
Output : person1 is available
person2 not available
Mustache is a logic less template, but it does not mean that we can't add conditions in template. We can skip or add template section based on conditions.
A section begins with a pound and ends with a slash. In above example {{#available}} begins a "available" section while {{/available}} ends it.
An inverted section begins with a caret and ends with a slash. In above example {{^available}} begins a "available" inverted section while {{/available}} ends it.
If the value of key "available" is true than "available" section will show and if the value of key "available" is false inverted "available" section will show.
5. Implement loop in mustache template :
Output : person1 is from India
person2 is from USA
person3 is from Japan
person4 is from Canada
person5 is from Kenya
We can repeat a section by iterating over a list or array.If list is empty than section will not show.
6. comments in mustache template :
Output : person1 is from India
person2 is from USA
person3 is from Japan
person4 is from Canada
person5 is from Kenya
We can add comments in mustache template. comments will be ignored by mustache during rendering.
For reference and more information see here
Mustache is simply a js library that read JSON data and display it using mustache templates.Mustache template use tags to display json data.
Mustache tags are indicated by double curly braces "{{mustache tag}}".
It reduce our efforts in HTML coding because we can use same mustache template again and again.
2. Basic mustache example :
<html>
<head>
<title>starting with mustache</title>
<script type="text/javascript" src="mustache.js" ></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
$(document).ready(function(){
var jsonData = {
name : "Rahul",
country : "India"
};
var mustacheTemplate = "{{name}} is from {{country}}";
// render mustache template
var mustacheOutput = Mustache.render(mustacheTemplate, jsonData);
$('#result').html(mustacheOutput);
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Output : Rahul is from India
step 1 : Add mustache.js in your HTML page. mustache.js can be download from githhub.
step 2 : Create mustache template.
step 3 : Render mustache template and it to HTML element.
As we discuss earlier that mustache used tag to display data from json.Tags are indicated by double curly braces.When we render mustache template, it simply search template tags into json data and display that data. For example here mustache template search {{name}} and {{country}} in jsonData to display.
3. Use of HTML tag in mustache template :
<html>
<head>
<title>html tag in mustache tamplate</title>
<script type="text/javascript" src="mustache.js" ></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
$(document).ready(function(){
var jsonData = {
name : "Rahul",
country : "<b>India</b>"
};
<!-- All variables are HTML escaped by default. If you want to return unescaped HTML,
use the triple mustache >>
<!-- {{{name}}}.You can also use & to unescape a variable: {{& name}} >>
// var mustacheTemplate = "{{name}} is from {{& country}}";
var mustacheTemplate = "{{name}} is from {{{country}}}";
// render mustache template
var mustacheOutput = Mustache.render(mustacheTemplate, jsonData);
$('#result').html(mustacheOutput);
});
</script>
</head>
<body>
<div id="result"></div>
</body>
</html>
Output : Rahul is from India
we can use HTML tags in mustache template. All HTML tags are escaped by default. If you want to return unescaped HTML tag, use the triple curly braces {{{name}}}. You can also use & to unescape a HTML tag: {{& name}}.
4. Implement conditions in mustache template :
<html>
<head>
<title>conditions in mustache template</title>
<script type="text/javascript" src="mustache.js" ></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
$(document).ready(function(){
var person1 = {
available : true,
name : "person1"
};
var person2 = {
available : false,
name : "person2"
};
var mustacheTemplate = "{{name}} is from {{country}}";
var mustacheTemplate = "{{#available}}" +
"{{name}} is available" +
"{{/available}}" +
"{{^available}}" +
"{{name}} not available" +
"{{/available}}";
var output1 = Mustache.render(mustacheTemplate, person1);
$('#person1').html(output1);
var output2 = Mustache.render(mustacheTemplate, person2);
$('#person2').html(output2);
});
</script>
</head>
<body>
<div id="person1"></div>
<div id="person2"></div>
</body>
</html>
Output : person1 is available
person2 not available
Mustache is a logic less template, but it does not mean that we can't add conditions in template. We can skip or add template section based on conditions.
A section begins with a pound and ends with a slash. In above example {{#available}} begins a "available" section while {{/available}} ends it.
An inverted section begins with a caret and ends with a slash. In above example {{^available}} begins a "available" inverted section while {{/available}} ends it.
If the value of key "available" is true than "available" section will show and if the value of key "available" is false inverted "available" section will show.
5. Implement loop in mustache template :
<html>
<head>
<title>loop in mustache tamplate</title>
<script type="text/javascript" src="mustache.js" ></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
$(document).ready(function(){
var person = {
"person" : [
{
name : "person1",
country : "<b>India</b>"
},
{
name : "person2",
country : "<b>USA</b>"
},
{
name : "person3",
country : "<b>Japan</b>"
},
{
name : "person4",
country : "<b>Canada</b>"
},
{
name : "person5",
country : "<b>Kenya</b>"
}
]
};
var mustacheTemplate = "{{#person}}" +
"{{name}} is from {{{country}}}" + "<br>" +
"{{/person}}";
var output = Mustache.render(mustacheTemplate, person);
$('#person').html(output);
});
</script>
</head>
<body>
<div id="person"></div>
</body>
</html>
Output : person1 is from India
person2 is from USA
person3 is from Japan
person4 is from Canada
person5 is from Kenya
We can repeat a section by iterating over a list or array.If list is empty than section will not show.
6. comments in mustache template :
<html>
<head>
<title>comments in mustache template</title>
<script type="text/javascript" src="mustache.js" ></script>
<script type="text/javascript" src="jquery.min.js" ></script>
<script>
$(document).ready(function(){
var person = {
"person" : [
{
name : "person1",
country : "<b>India</b>"
},
{
name : "person2",
country : "<b>USA</b>"
},
{
name : "person3",
country : "<b>Japan</b>"
},
{
name : "person4",
country : "<b>Canada</b>"
},
{
name : "person5",
country : "<b>Kenya</b>"
}
]
};
var mustacheTemplate = "{{#person}}" +
"{{! mustache Template will show person detail}}" +
"{{name}} is from {{{country}}}" + "<br>" +
"{{/person}}";
var output = Mustache.render(mustacheTemplate, person);
$('#person').html(output);
});
</script>
</head>
<body>
<div id="person"></div>
</body>
</html>
Output : person1 is from India
person2 is from USA
person3 is from Japan
person4 is from Canada
person5 is from Kenya
We can add comments in mustache template. comments will be ignored by mustache during rendering.
For reference and more information see here
No comments:
Post a Comment