Handlebars.js is a JavaScript templating library. Web apps are using JavaScript to create dynamic interfaces now more than ever before, and that’s not a trend that will change any time soon. DOM manipulation is great for simpler JavaScript apps, but what do you do when you’re changing huge chunks of the document with each change of the view? That’s where JavaScript templating has a critical role to play.

1. Introduction to JavaScript
Templating using Handlebars.js
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Date: 22/05/2014

2. Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
About Me
 Connect Me :
◦ Facebook : https://www.facebook.com/prabhat.k.rai
◦ LinkedIn : http://www.linkedin.com/in/prabhatkrai
◦ Twitter : https://twitter.com/prabhat89cs
◦ G+ : https://plus.google.com/+prabhatrai89
 Contact Me :
◦ Email : prabhat.rai@mindfiresolutions.com / prabhatrai.cs89@yahoo.in
◦ Skype : mfsi_prabhat.rai
MCP:70-480 – Specialist certification in HTML5
with Javascript and CSS3
OCPJP – Oracle Certified Professional Java SE 6
Developer
Skills : PHP, jQuery, Java

3.  Templating engines
 Client side templates
 Basics of handlebars.js
 Context
 Blocks
 Helpers
 Partials
 Utils
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Roadmap

4. Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Templating Engines
 Seperating business logic
from presentation
 Caching system

5.  We generally use server side templates
 Dynamic Interface
 HTML or JSON ?
 Cleaner and simpler
 Decoupled code
 JQote,mustache,jTemplates,nano,
handlebars etc.
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Client Side Templates

6.  Started by Yehuda Katz
 Built upon {{ Mustache }} (Logic-less templating)
 Compiler built with Javascript
 Input : Handlebar expressions and HTML
 Output : Javascript function
 template = Handlebars.compile($('#myID').html());
 This function then takes Data and returns HTML string.
 appendText = template(data);
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Handlebars.js - Basics

7. Handlebars.js – Basics Contd.
 <script type=”text/x-handlebars-template”
id=”x”></script>
 {{Expression}}
 Comments {{! }} or {{!-- --}}
 Use {{{Expression}}} to Unescape
 Contains (Value/Function/Nothing)
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions

8. Handlebars.js – Context
 {{this}} -> current context
 Dot ( . ) -> inner context
 Forward-slash ( / ) -> inner context deprecated
 dot dot ( .. ) -> parent context
 Examples
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions

9. Handlebars.js – Blocks
 start: Prepended by hash ( # )
 {{#expression}}
 end: Prepended by forward slash ( / )
 {{/expression}}
 {{@index}} & {{@key}}
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions

10. Global block helpers
 {{#if block}} {{else}} {{/if}}
 {{#unless block}}{{/unless}}
(false, 0, undefined, null, "" or [])
 {{^expression}} just like {{#unless}}
but not on zero
 {{#each block}}{{/each}}
 {{#with block}}{{/with}}
 Examples
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions

11.  Can be used in any context
 Handlebars.registerHelper
 options.fn, inverse
 Examples
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Custom Expression Helpers

12.  Sub Templates
 {{> partialName}}
 Render a section within a larger template
 Handlebars.registerPartial()
 Example
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Handlebars.js - Partials

13.  Handlebars.Utils.escapeExpression(string)
 Handlebars.Utils.isEmpty(value)
 Handlebars.Utils.toString(obj)
 Handlebars.Utils.isArray(obj)
 Handlebars.Utils.isFunction(obj)
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Handlebars.js - Utils

14. References
 http://handlebarsjs.com
 http://zachsnow.com/#!/blog/2012/handleba
rsjs/
 http://en.wikipedia.org/wiki/Web_template_s
ystem
 http://javascriptissexy.com/handlebars-js-
tutorial-learn-everything-about-handlebars-
js-javascript-templating/
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions

15. Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Questions ???

16. Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Thank You

17. www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
http://twitter.com/mindfires