0
Introduction to JavaScript
Templating using Handlebars.js
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Date: 22/05/2014
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
About Me
 Connect Me :
◦ Facebook : https://www.facebook.com/prabhat.k.r...
 Templating engines
 Client side templates
 Basics of handlebars.js
 Context
 Blocks
 Helpers
 Partials
 Utils
Pre...
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Templating Engines
 Seperating business logic
from presentation
 Cachin...
 We generally use server side templates
 Dynamic Interface
 HTML or JSON ?
 Cleaner and simpler
 Decoupled code
 JQo...
 Started by Yehuda Katz
 Built upon {{ Mustache }} (Logic-less templating)
 Compiler built with Javascript
 Input : Ha...
Handlebars.js – Basics Contd.
 <script type=”text/x-handlebars-template”
id=”x”></script>
 {{Expression}}
 Comments {{!...
Handlebars.js – Context
 {{this}} -> current context
 Dot ( . ) -> inner context
 Forward-slash ( / ) -> inner context ...
Handlebars.js – Blocks
 start: Prepended by hash ( # )
 {{#expression}}
 end: Prepended by forward slash ( / )
 {{/exp...
Global block helpers
 {{#if block}} {{else}} {{/if}}
 {{#unless block}}{{/unless}}
(false, 0, undefined, null, "" or [])...
 Can be used in any context
 Handlebars.registerHelper
 options.fn, inverse
 Examples
Presenter: PRABHAT KUMAR RAI,
Mi...
 Sub Templates
 {{> partialName}}
 Render a section within a larger template
 Handlebars.registerPartial()
 Example
P...
 Handlebars.Utils.escapeExpression(string)
 Handlebars.Utils.isEmpty(value)
 Handlebars.Utils.toString(obj)
 Handlebar...
References
 http://handlebarsjs.com
 http://zachsnow.com/#!/blog/2012/handleba
rsjs/
 http://en.wikipedia.org/wiki/Web_...
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Questions ???
Presenter: PRABHAT KUMAR RAI,
Mindfire Solutions
Thank You
www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
ht...
Upcoming SlideShare
Loading in...5
×

Introduction to javascript templating using handlebars.js

1,034

Published on

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.

Published in: Software, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,034
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to javascript templating using handlebars.js"

  1. 1. Introduction to JavaScript Templating using Handlebars.js Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Date: 22/05/2014
  2. 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. 3.  Templating engines  Client side templates  Basics of handlebars.js  Context  Blocks  Helpers  Partials  Utils Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Roadmap
  4. 4. Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Templating Engines  Seperating business logic from presentation  Caching system
  5. 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. 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. 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. 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. 9. Handlebars.js – Blocks  start: Prepended by hash ( # )  {{#expression}}  end: Prepended by forward slash ( / )  {{/expression}}  {{@index}} & {{@key}} Presenter: PRABHAT KUMAR RAI, Mindfire Solutions
  10. 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. 11.  Can be used in any context  Handlebars.registerHelper  options.fn, inverse  Examples Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Custom Expression Helpers
  12. 12.  Sub Templates  {{> partialName}}  Render a section within a larger template  Handlebars.registerPartial()  Example Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Handlebars.js - Partials
  13. 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. 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. 15. Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Questions ???
  16. 16. Presenter: PRABHAT KUMAR RAI, Mindfire Solutions Thank You
  17. 17. www.mindfiresolutions.com https://www.facebook.com/MindfireSolutions http://www.linkedin.com/company/mindfire-solutions http://twitter.com/mindfires
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×