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:
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.
Thanks for this tip! It helped me a ton debugging my Handlebars templates and rendering order.
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
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) {
This is great tips and tricks.
The documents, dating from 2002 to 2008, detail accounts of prisoners at the infamous US …
it provide the code of software , but many times is can not undestnddable.
http://www.articlespeak.com/lavalife-free-trial-log-in-to-find-love-on-a-dating-site/
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.
i want study any any programming language but i can say in this time demand is .NET .
http://www.articlespeak.com/wall-street-journal-subscription-discount-best-deals/
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?
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.
Wow, pretty impressive stuff dude. Well done.
http://www.total-privacy.it.tc
Alan these articles have been awesome. Thanks for taking the time to put them together 🙂
Thanks so much, Joey. Feel free to let me know if there’s anything else you’d like me to write about: alan+tv@carsonified.com