LearnHandlebars.js Part 3: Tips and Tricks

   
Treehouse

Treehouse
writes on April 13, 2011

So we’re about done learning about Handlebars.js, but I’ve got a few examples of tricks I’ve found while using Handlebars that I figured I would share. If you haven’t read them yet, I’d highly recommend reading Part 1 and Part 2 of the series on Handlebars before you dive into this post.

The debug Helper

It can be easy at times to get confused about where you are in the stack in a Handlebars.js template. I usually keep a debug helper around to help me figure that out.

Handlebars.registerHelper("debug", function(optionalValue) {
  console.log("Current Context");
  console.log("====================");
  console.log(this);

  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

You could then use that helper in any template like:

{{debug}}

or like:

{{debug someValue}}

and you’ll see output in the JavaScript console letting you know what’s going on:

Current Context
====================
email: "alan@test.com"
first_name: "Alan"
last_name: "Johnson"
member_since: "Mar 25, 2011"
phone: "1234567890"
stripeClass: "even"
__proto__: Object
Value
====================
Alan

A jQuery Plugin

It tends to be a pretty regular pattern with Handlebars to compile a template, process it with some data, and then fill a DOM element with the results. Here’s a quick jQuery plugin that does all of that for you:


  
    What's Up?
  
  
    
This is where the content goes!

Updating More Than Just The Template Area

A lot of dynamic applications tend to have a layout that generally stays the same regardless of the template you’re displaying, and then a content area that shows the template that you’re looking at. Maybe there’s a sidebar with some navigation in it that generally stays the same, but each time you update the main content area you also need to update the title on the page. It’s pretty easy to cheat a bit with Handlebars to make that work. Handlebars helpers are allowed to not return anything, in which case they won’t add anything to the template output. You can use a helper that doesn’t return anything to update other parts of the page!

Imagine a site that has a structure something like this:

Sample App Layout

And maybe the markup looks like this:


  

Title

Content goes here!

Here’s a quick helper that will let you update the h1 for the title each time you apply content to the main content area:

Handlebars.registerHelper("title", function(fn) {
  $('h1').html(fn(this));

  return "";
});

And finally, a template that uses the helper:

  {{#title}}Details for {{name}}{{/title}}

  
...user details template stuff goes here...

When the template above is run, it will call the title helper, but since the title helper just returns an empty string, it won’t add anything to the template output. It will, though, use jQuery to update the h1 element for the page’s title.

Wrapping Up

I think this about wraps up the series on Handlebars.js. It’s been fun to share Handlebars.js with everyone, and to hear about the apps you’re writing with Handlebars.js. Please let me know in the comments if there’s anything else relating to Handlebars.js that you’d be interested in hearing about, or if you have any questions.

GET STARTED NOW

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

13 Responses to “Handlebars.js Part 3: Tips and Tricks”

  1. Thanks for this tip! It helped me a ton debugging my Handlebars templates and rendering order.

  2. Mike Griffin on October 5, 2013 at 10:16 pm said:

    When I first read the title of your post I thought the {{debug}} tag was going to do a JavaScript “debugger;” statement and I thought, how brilliant, I might create one and see if it helps debugging. I’ve created a Desktop application that allows you to run full handlebar templates on your desktop and was looking at debugging options, that’s how I found your article. You can see our reveal video here http://www.tiraggo.com/movies/M2G_Desktop_Reveal.html

  3. Jure Mav on October 2, 2013 at 2:49 pm said:

    Handlebars updated meanwhile. Helpers now pass object with hash parameter if options is not defined. Upper debug helper always show value data in console although options parameter is not passed.

    To bypass this error, replace line #6 with:
    if (!optionalValue.hash && optionalValue) {

  4. Anonymous on May 4, 2011 at 11:11 pm said:

    This is great tips and tricks.

  5. The documents, dating from 2002 to 2008, detail accounts of prisoners at the infamous US …

  6. In your jQuery plugin example, what are you accomplishing by using the ‘compiled’ object in ‘compiled[template] = Handlebars.compile(template);’? Why not just use a simple variable?

    I thought you might be attempting to cache the compiled template, but I don’t see a check against an existing cached item there.

  7. Great timing with these articles! I just started toying with displaying Tumblr JSON via handlebars, but have run into troubles.

    Expressions with a dash in them don’t seem to work, like {{regular-title}} for example. Is this just a limitation with the handlebar/mustache expression?

    • Anonymous on April 15, 2011 at 7:58 pm said:

      Great question. The issue there is that Handlebars expects the expression to use valid JavaScript variable names. So anything with a dash wouldn’t be valid.

  8. Anonymous on April 13, 2011 at 6:03 pm said:

    Wow, pretty impressive stuff dude. Well done.

    http://www.total-privacy.it.tc

  9. Alan these articles have been awesome. Thanks for taking the time to put them together 🙂

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop