如何为Handlebars模板设置默认参数

How to set default arguments for Handlebars templates?

本文关键字：设置 默认 参数 Handlebars      更新时间：2023-09-26

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

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]。保留第二个参数没什么大不了的，但我只是想知道是否有办法解决这个问题。

Helpers接受可选的Hash作为其最终参数。如果模板不提供哈希参数，Handlebars将自动传递一个空对象（｛｝）。

[发件人https://handlebars-lang.github.io/docs/guide/block-helpers.html#hash-arguments]

因此，当您在helpers参数列表中有title时，它将被视为Hash对象。您可以通过在控制台中记录标题来检查这一点。因此，为了让代码正常工作，您可以检查标题的类型是String还是不使用typeof运算符。

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

它应该起作用。工作示例：http://jsfiddle.net/prabhat_rai/ve4h39vm/

在手把中使用哈希参数的正确方法似乎是在options参数的hash属性中检查预期的可选参数（作为最后一个参数传递给任何助手）。

在OP示例中，它看起来像这样：

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

现在CCD_ 5和CCD_。也就是说，你可以指定一个工具提示，但没有自定义标题：

{{ link_to 'articles' tooltip='Go to Articles' }}

修复您的助手。options对象使此操作变得困难。因此，通过用围绕参数移动的东西包装函数，您就有了更合理的代码，假设您将有多个带有可选参数的助手

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))
相关文章：