In this blog post we will see more advanced usage of handlebar template engine with express
In our previous tutorial we saw how to create a helloworld application using handlebar with express, here we will see more advanced usage of handlebar.
Variables
We have seen already how to pass variables in our route files, now to access those variables in our view files is easy
[code]
{{variable_name}}
[/code]
//index.js | |
router.get('/variable', function (req, res, next) { | |
res.render('variable', { | |
title: 'Basic Variable', | |
user: { | |
firstname: 'Manish', | |
lastname: 'Prakash', | |
email: 'manish@excellencetechnologies.in' | |
} | |
} | |
); | |
}); | |
//template file | |
//variable.hbs | |
{{!Basic Variable Access}} | |
<h3>Welcome {{user.firstname}}</h4> | |
{{!Changing Scope of Variable Access}} | |
{{!Instead of user.lastname and user.email we are directly accessing lastname,email}} | |
{{#with user}} | |
{{lastname}} {{email}} | |
{{/with}} |
If Condition/Each Loop with Handlebar
If conditions and for loops are quite easy
[code]
{{#if variable}}
//if true
{{else}}
//if flase
{{/if}}
{{#each array_variable}}
//loop
{{else}}
//if array empty
{{/each}}
[/code]
//index.js route file | |
router.get('/loop', function (req, res, next) { | |
res.render('loop', { | |
title: 'Basic If Conditions and Loop', | |
"employees": [ | |
{"firstName": "John", "lastName": "Doe"}, | |
{"firstName": "Anna", "lastName": "Smith"}, | |
{"firstName": "Peter", "lastName": "Jones"} | |
] | |
} | |
); | |
}); | |
//template file | |
{{!Nested if and each loop}} | |
{{#if employees}} | |
<table class="table"> | |
<thead> | |
<tr> | |
<td>FirstName</td> | |
<td>LastName</td> | |
</tr> | |
</thead> | |
<tbody> | |
{{/if}} | |
{{#each employees}} | |
<tr> | |
<td>{{@index}}</td> | |
<td>{{firstName}}</td> | |
<td>{{lastName}}</td> | |
</tr> | |
{{/each}} | |
{{#if employees}} | |
</tbody> | |
</table> | |
{{/if}} | |
{{#unless data}} | |
<small>No Data Passed</small> | |
{{/unless}} |
Handlebar Helpers
Most of the time we require advance logic in our templates, not just simple if and for loops. For those instances we use helpers. Through helpers we can write javascript functions and call them inside templates.
Below we have created an helper function called “canDisplayDeal”. The function is defined in index.js routes file and is called in the handlebar template.
//index.js | |
router.get('/helper', function (req, res, next) { | |
res.render('helper', { | |
title: 'Using Helpers', | |
helpers: { | |
canDisplayDeal: function (options) { | |
if (this.is_publish == 1 || this.is_publish == '1') { | |
return options.fn(this); | |
} else { | |
return options.inverse(this); | |
} | |
} | |
}, | |
deals: [ | |
{ | |
"is_publish": "1", | |
"name": "LG L90 Dual D410 Smartphone at Rs.11599" | |
}, | |
{ | |
"is_publish": "0", | |
"name": "Sony MDR-XB250 Headphone" | |
}, | |
{ | |
"is_publish": "1", | |
"name": "Philips HTB7150 Blu Ray Bluetooth Soundbar with Subwoofer Rs.27999" | |
}, | |
{ | |
"is_publish": "0", | |
"name": "Get 65% off On Over 5000 Books" | |
}, | |
{ | |
"is_publish": "0", "name": "HealthKart Health & Beauty Products Rs. 100 off on Rs. 101" | |
} | |
] | |
} | |
); | |
}); | |
//helper.hbs template file | |
{{!Using Helpers}} | |
{{#each deals}} | |
{{#canDisplayDeal}} | |
{{this.name}} <br/> | |
{{/canDisplayDeal}} | |
{{/each}} |
More details about helpers http://handlebarsjs.com/block_helpers.html
The entire code base for this is available here
https://github.com/manishiitg/excellence_magento_blog/tree/master/nodejs/express/tutorial4
Experiments
1. Implement the bootstrap starter template using handlebars (http://getbootstrap.com/examples/starter-template/)
2. Create an helper function using the above “deals” json object. If the string length “name” in deals is greater than 10, add … and truncate the name else output it as it is.
Best way to start handlebars. You saved my day.