Advanced Handlebars-option hashes and more

Published on Mar 29, 2015

We can do lots of things with Handlebars, including named parameters and block parameters... But should we?

Ember says "Sometimes".

This episode includes details on how to use named parameters in a helper, as well as the limits imposed by Ember on your helpers and when you should just use a component instead.


Links

Code

Transcript

In the last episode, we explained subexpressions, Handlebars helpers that you put in parentheses inside other mustaches. However, we didn't explain one other thing about this query-params call, and that is how this is called. In the last episode, we had only use unnamed arguments, so today we're going to explore how to use named arguments in Handlebars helper.

Named Arguments (options hash)

Let's take a look at the with-options example that I've created. Here it takes one argument, one unnamed argument, and then we're giving it several named arguments, first, second, and third. If we go here, we see it's taking the first argument and the second argument, but it hasn't done anything with the third. How do we make it use those first two arguments?

Each Handlebars helper takes an options hash after all of the inputs, which are not given a name, which are just done by their order. Here, if we have the first, then we add that to the string. If we have the second, we also add it to the string, and that's how we get that displaying. This is a rather silly example, but it shows the mechanics of using the options hash. Let's expand on it a little bit. Let's go ahead and make it take a tag name. Here, we can say tag name equals B for bold. This one is now bold. You may be saying tag name, that sounds familiar. That's because tag name is one of the optional arguments for a component. If the component doesn't have a tag name specified, then it'll use div, which is also the behavior that I've added here.

Block Helpers Unsupported

You may be wondering, why don't you just use a component, and you're not the only one thinking along those lines. When preparing the Screen Cast, I was trying to create a block helper. A block helper is a helper that starts with a hash and then has a block and then an ending tag. However, I found that it gave me this error. Ember Handlebars is trying to move you away from certain features that are present in regular handlebars, and this is very clear when you're using Ember CLI and it's difficult to use anything besides makeBoundHelper. If you're using Ember without Ember CLI you can still get away with this for a little while longer.

Use Components

Why is it giving this error? The answer given by Ember superstar, rwjblue, is that you should just use a component. When it is best to use Handlebars helpers and when is it best to use components? I've compiled a handy algorithm. It's going to be used as a subexpression, use the Handlebars helpers. Otherwise, you can probably use a component.

Thanks for listening and thanks for subscribing. In this episode, we talk about Advanced Handlebars Techniques, including the options hash, and more importantly, when it's best to use handlebars and when it's best to use components. I'll see you next week.

Subscribe to our mailing list