Handlebars Tutorial

Get the Code Here : http://goo.gl/h81zZA

In this video we’ll learn Handlebars by walking through numerous examples. Handlebars is a superset of the Mustache template engine. A template engine helps you separate your HTML from dynamic content created by languages such as JavaScript.

We’ll look at how to dynamically place data, templates, working with arrays, helper functions, passing attributes, escaping strings for safety, block helpers, fn, inverse, partials, precompiling templates and much more.


Mark P Jaramillo says:

Bammm, another Hit!

cybermyth says:

Thank you for another great tutorial, a question though.. I am learning node.js for my upcoming internship. I’ll be a backend programmer. I don’t really get the point of template engines in general. Instead of passing JSON data (on GET/POST requests), I use a template engine if I understand correctly? But let’s say I want to pass some data using handlebars. If I’m a backend programmer, I assume the HTML template will be already given to me by the frontend programmers? I just need to implement the hadnlebars part? I hope I was clear enough

Code War says:

Take tutorials on using gulp or grunt in windows sir

Colin Sivak says:

Why don’t we close the

  • tags? It seems to me that it would go against conventions. I’m at 6:34 for reference.
  • Connie Chen says:

    Hi When I try to do precompile template, why does it say template is not a function after I point template to Handlebars.templates[‘groceries’]? Thanks.

    Ken Mastro says:

    it is not as easy as the video makes it seem. If you do not have a good website u will not be approved.

    Emmanuel says:

    hello, sir. Any tutorials for adding css to handlebars?

    jmartecep says:

    I’m having issues linking my style sheet to my main.handlebars. Any suggestions?

    CrescentFresh says:

    Dude, Derek. I am going through all of your tutorials even the ones I already know like Javascript. How the heck do not just “know” but so thoroughly understand so many different frameworks, languages, etc?! How long have you been doing development?

    eXtremeFX2010 says:

    Nice Tutorial but I only see people doing tutorials with data coming back upon browser refresh. Nowhere do I see a tutorial where that has more interactivity. EXAMPLE: How about doing a tutorial where user “Clicks” on a simple href link and injects that data into a div container? How hard is that? I would like to know how to display data with a simple click of an href link. Please advise. Thanks.

    Victor Mikhaylov says:

    Thanks a lot! Very consistent video.
    Saved me hours to understand Handlebars.

    gabriel brito says:

    Thanks Derek.

    Sonnix Jackson says:

    Thank you Mr. Banas

    tao wang says:

    can i user handlebar for loadmore and refresh?

    Nikolay G HD says:

    Hmmm i just searched handlebars flobots…


    Kunal Yadav says:

    Quite a long video but totally worth it. Thanks!

    suman bogati says:

    Loved the video, those who love the tutorial of handleabrs with demo and example, please visit the tutorial http://jsgyan.blogspot.in/2018/02/best-handlebars-tutorial-with-demo.html

    Sanjayreddy Guna says:

    Thanks for the such a nice tutorial, but i am able to execute the code, please see the below steps which i have followed.

    1. install node js and run the npm command– its working as expected
    2. installed handlebars-v4.0.5.js(intsall nothing but down load right)
    3. install sublimetext2 and write a html file and included

    Hello Handlebars

    4. save the file in some other folder location.
    5. when i try to open that html file with browser, handlebar features not coming and its coming as below.

    var myInfo = ”
    My name is {{name}} and I live at {{street}} in {{city}}, {{state}}

    “; var template = Handlebars.compile(myInfo); var data = template({name: “Derek”, street: “123 Main St”, city: “Pittsburgh”, state: “PA”}); document.getElementById(‘derekData’).innerHTML += data;

    full html file source code:
    < !DOCTYPE html>

    Hello Handlebars

    var myInfo = “

    My name is {{name}} and I live at {{street}} in {{city}}, {{state}}


    var template = Handlebars.compile(myInfo);

    var data = template({name: “Derek”, street: “123 Main St”, city: “Pittsburgh”, state: “PA”});
    document.getElementById(‘derekData’).innerHTML += data;

    Please help on this.

    Arjun AdhiQari says:

    Whatsoever programming language or library I need to learn,untill now I have found every tutorials from you Derek..I really respect you man..Thank You so much..

    Joseph Kota says:

    is there a way to print certain index value in the array instead of printing everything? thankyou.

    Promo Hediyeler Servisi says:


    Alex Cio says:

    You’re explaining it absolutely great, but to be sure, I don’t understand how to make use of. Think I am going to check some more videos about it.

    Tom Smith says:

    Your Spanish is beyond awful. Everyone knows the h in hola is silent. Other than that good video.

    Oplinta Moshtak says:

    if I send a var into the temlate from my app.js/server.js (taken from the mongoDB database), how can I u document.getElementByID if I don’t have the document defined inside my app.js which I defined my helper in?

    rickbsgu says:

    Really dense, really good. Pause is your friend.

    Raoden Nomen says:

    Hello, good job.
    I see that you avoided Decorators and Nested handlebars paths. But still it’s good.

    Ravi Goli says:

    Thx much Derek. you are one of the nice ppl out there!! helping ppl.

    Allen Mark Brown says:

    Are you working in a Chrome window or a Sublime Text window? How do you get the window to update to show on the right?

    Joseph German Ocena says:

    You sound like yogi bear!

    Dino Prašo says:

    8:52 Why did you have to close the OL tag but not the LI tag ?

    Chris Gumb says:


    Thoma Boyle says:

    Thank you Derek, Much appreciated! Can I interpretation this lesson .ts (TypeScript )files, With Angula _Cli Frame work?

    Ryan Kite says:

    Thanks for the great video and examples, much appreciated!

    Sam Finoh says:

    is it possible to post data to a JSON database such as firebase ?

    赵晓明 says:

    Handlebars.registerPartial(“askQuestion”, ‘< {{tagName}}>{{author}}‘ + ‘


    ‘ );

    how does it know ?

    Mohsin Younas says:

    I have a very humble question, Any thing you do not know?

    Aseem Lalfakawma says:

    why switch between windows and mac mid video?

    Allen Schwartz says:

    Thanks Derek, you’ve helped me AGAIN! I used this video to understand Meteor Blaze Spacebars actually. You’re awesome!

    Gregg Od says:

    When this video started i was like woah… did Travis change his name to Derek?

    iNTERS22 says:

    You’ve put default value “Hello”, why did it say “Hola”?

    Anonymity says:

    why handlebars are used for

    Joseph German Ocena says:

    Question, In your example, you reference the precompiled javascript using the name of the file but how about bundled precompiled handlebars js with other javascipt?

    Pin 12 says:

    The reason I can hardly follow this tutorial is because of the way the sound is edited. There are no pauses so everything becomes one long sentence of 37 minutes…. Sorry #unsubscribe….

    Darkbdlz says:

    did you move the handlebar js file that you installed into a new folder? If not how are you able to make a src point to it?

    Sean Noonan says:

    What exactly does “precompile” mean in a web development context? I think I saw this discussed on stack overflow where someone equated it to minification. It’s the browser that is rendering everything no? It seems like such a terrible term to use, compile or precompile when discussing non compiled languages to begin with. Is it true that it simply refers to the minification or rather is it something that makes it easier for the browser to render, to speed up the process by placing files and such together and in order?

    Phoenix GSD says:

    LOVELY! awesome1

     Write a comment


    Do you like our videos?
    Do you want to see more like that?

    Please click below to support us on Facebook!