Question

我已经编写了一个插入链接的模板助手，相当简单。

Handlebars.registerHelper('link_to', function(href, title) {
    return new Handlebars.SafeString('<a href="/' + href + '">' + title + '</a>');
});

它的用法如下：

{{ link_to 'articles' 'Articles' }}

但是，如果href是自描述的，那么在第二个参数中指定大写版本似乎有点多余。因此，如果省略title参数，我想自动设置此行为。如下所示：

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>');
});

但是，在使用{{ link_to 'articles' }}呈现时，我只会获得[object Object]。保留第二个参数并不是什么大不了的事，但我只是想知道是否有办法解决这个问题。

Answer 1

Helpers接受一个可选的Hash作为其最后一个参数。如果模板没有提供散列参数，Handlebars将自动传递一个空对象（{}）。

[来自http://handlebarsjs.com/block_helpers.html]

因此，当您在helpers参数列表中拥有title时，它将被视为Hash对象。您可以通过在控制台中记录标题来检查。因此，为了使您的代码能够工作，您只需使用typeof运算符检查标题类型是否为String。

if(!title || typeof title != 'String') {
    title = href.toString().charAt(0).toUpperCase() + href.slice(1);
}

它应该有效。工作范例： http://jsfiddle.net/prabhat_rai/ve4h39vm/

Answer 2

在Handlebars中使用散列参数的正确方法似乎是检查DoubleCollection参数的hash属性中的预期可选参数（作为最后一个参数传递给任何帮助程序）。 / p>

在OP示例中，这将如下所示：

options

这样可以像这样使用帮助器

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>');
});

或者

{{ link_to 'articles' title='Articles' }}

这样做的好处是可以添加任意数量的可选模板参数，而不仅仅是一个。这就是上面的例子可以很容易地扩展到提供一个可选的工具提示：

{{ link_to 'articles' }}

现在，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>'); });和title都可以相互独立地指定。即您可以指定工具提示但不指定自定义标题：

tooltip

Answer 3

修复您的助手。选项对象使这一点变得困难。因此，通过将函数包装在参数周围可移动的东西，假设您将有多个带有可选参数的助手，您将获得更合理的代码

function fixHelper(func) {
  return function(){
    var aArgs=Array.prototype.slice.call(arguments, 0)
      ,opts=aArgs.pop();
    aArgs.unshift(opts);
    return func.apply(this, aArgs);
  }

 function link_to(options, href, title) {
    title = title || href.ucfirst()
    return new Handlebars.SafeString('<a href="/' + href + '">' + title + '</a>')
 }
 Handlebars.registerHelper('link_to', fixHelper(link_to))

如何设置Handlebars模板的默认参数？

3 个答案: