How can I set default arguments for Handlebars templates?
I wrote a template helper that inserts a link quite simply.
Handlebars.registerHelper('link_to', function(href, title) {
return new Handlebars.SafeString('<a href="/' + href + '">' + title + '</a>');
});
And using it looks like this:
{{ link_to 'articles' 'Articles' }}
However, it is a bit overkill for me to specify the capitalized version in the second parameter if the href is self-descriptive. So I would like to set this behavior automatically if the title parameter is omitted. Something like the following:
Handlebars.registerHelper('link_to', function(href, title) {
if (!title) {
title = href.charAt(0).toUpperCase() + href.slice(1);
}
return new Handlebars.SafeString('<a href="/' + href + '">' + title + '</a>');
});
However, when rendered with, {{ link_to 'articles' }}
I just get [object Object]
. It's not worth leaving the second parameter, but I'm just wondering if there is a way around this.
source to share
Helpers accept an optional Hash as their last argument. If the template contains no hash arguments, Handlebars automatically passes an empty object ({}).
[From http://handlebarsjs.com/block_helpers.html ]
So when you have a title in the helper parameter list, it is treated as a Hash object. You can check this by running the header in the console. So to get your code to work, you can just check that if the header type is String or not, use the typeof operator.
if(!title || typeof title != 'String') {
title = href.toString().charAt(0).toUpperCase() + href.slice(1);
}
and it should work. Working example: http://jsfiddle.net/prabhat_rai/ve4h39vm/
source to share
The correct way to use hash arguments in descriptors seems to be to check the expected optional parameters in the hash
argument attribute options
(passed to any helper as the last argument).
In the OP's example, it would look like this:
Handlebars.registerHelper('link_to', function(href) {
var options = arguments[arguments.length - 1];
var title = options.hash.title || href.toString().charAt(0).toUpperCase() + href.slice(1);
return new Handlebars.SafeString('<a href="/' + href + '">' + title + '</a>');
});
So the helper can be used like
{{ link_to 'articles' title='Articles' }}
or
{{ link_to 'articles' }}
This has the advantage that you can add any number of optional template arguments, not just one. That is, the above example can be easily extended to provide additional tooltip:
Handlebars.registerHelper('link_to', function(href) {
var options = arguments[arguments.length - 1];
var title = options.hash.title || href.toString().charAt(0).toUpperCase() + href.slice(1);
var tooltip = options.hash.tooltip || title;
return new Handlebars.SafeString('<a href="/' + href + '" title="' + tooltip + '">' + title + '</a>');
});
Now both title
and tooltip
can be specified independently of each other. That is, you can specify a tooltip, but not a custom title:
{{ link_to 'articles' tooltip='Go to Articles' }}
source to share