- “PARTIAL” are very handy in Handlebar templating.
- Yo can see my previous post for basics of Handlebar templating.
- In this Demo, “We will see how to create and and register a handlebar partial“.
- The project structure is as below:-
- In this demo we have created a partial for “address” object which have two fields “country” and “state“. The address partial will style the country (with uppercase and some color) and for state (capitalize and some color).
- To register a new partial we need to use registerPartial() method.
- A partial is called using {{ > partialaname}}
- The HTML markup for partials and others are as below,
<!DOCTYPE html>
<html>
<head>
<title>HandleBar Templating </title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
#my-container{
width: 400px;
border: 1px solid grey;
}
.pass{
color:green;
}
.fail{
color:darkred;
}
.country{
text-transform: uppercase;
color:blue;
}
.state{
text-transform: capitalize;
color:blueviolet;
}
</style>
</head>
<body>
<div id="my-container" class="table-responsive">
</div>
<!--Handlebar templates start-->
<script id="address-partial" type="text/x-handlebars-template">
<span class="country">{{ address.country }}</span>-<span class="state">{{ address.state }}</span>
</script>
<script id="student-template" type="text/x-handlebars-template">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Mark</th>
<th>Subject</th>
<th>Address</th>
</tr>
</thead>
<tbody>
{{#each students}}
<tr>
<td>{{ this.name }}</td>
<td>{{customMarker this.mark }}</td>
<td>{{ this.subject }}</td>
<td>{{> address }}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
<!--Handlebar templates end-->
<script src="lib/jquery-1.10.2.min.js"></script>
<script src="lib/handlebars.js"></script>
<script src="js/my-custom-helper-script.js"></script>
<script src="js/my-script.js"></script>
</body>
</html>
- The script for registering a partial are as below,
/**
* Created by saan on 10/12/13.
*/
$(document).ready(function(){
/*Custom Partial*/
Handlebars.registerPartial("address", $("#address-partial").html());
/*Custom Helper*/
Handlebars.registerHelper("customMarker", function(studentMark) {
if(studentMark > 200){
return new Handlebars.SafeString(studentMark +"<b class='pass'> PASS </b>");
}else{
return new Handlebars.SafeString(studentMark +"<b class='fail'> FAIL </b>");
}
});
});
- The JSON data we have used for this demo(studentData.json) as below,
{
"students": [
{
"name": "sandeep",
"mark": 35,
"subject": "Geography",
"address":{
"country":"India",
"state":"Odisha"
}
},
{
"name": "sangeeta",
"mark": 135,
"subject": "English",
"address":{
"country":"India",
"state":"Karnataka"
}
},
{
"name": "surabhi",
"mark": 315,
"subject": "History",
"address":{
"country":"India",
"state":"Tamilnadu"
}
},
{
"name": "sumanta",
"mark": 305,
"subject": "Mathematics",
"address":{
"country":"India",
"state":"Odisha"
}
},
{
"name": "Ram",
"mark": 200,
"subject": "History",
"address":{
"country":"India",
"state":"WestBengal"
}
},
{
"name": "John",
"mark": 199,
"subject": "Geography",
"address":{
"country":"UK",
"state":"Glasgow"
}
},
{
"name": "Jack",
"mark": 355,
"subject": "English",
"address":{
"country":"US",
"state":"Newyork"
}
}
]}
- The Firebug console inspection is as below:-
- The output in browser looks like below:-
- Download link for the demo:-
