Handlebars模板占位符的默认值

Default value for a Handlebars` template placeholder

本文关键字：默认值 占位符 Handlebars      更新时间：2023-09-26

我可以为Handlebars的模板占位符指定默认值吗？

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{method}}" action="{{action}}" class="menu-edit-form">
...                     
    </form>
</script>

我是否可以为｛｛method｝｝和｛｝操作｝指定默认值，并在传递给编译模板的对象中跳过它们？

Handlebars没有"默认值"
您应该使用{{#if}}语句来检查是否设置了属性。

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{#if method}}{{method}}{{else}}POST{{/if}}" action="{{#if action}}{{action}}{{else}}/{{/if}}" class="menu-edit-form">
...
    </form>
</script>

或者，如果你想要更干净的语法，可以使用简单的助手：

Handlebars.registerHelper('safeVal', function (value, safeValue) {
    var out = value || safeValue;
    return new Handlebars.SafeString(out);
});

它允许你这样写：

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{safeVal method 'POST'}}" action="{{safeVal action '/'}}" class="menu-edit-form">
...
    </form>
</script>

这是我的简单解决方案

首先，我们创建了一个非常基本的助手，称为"选择"

    Handlebars.registerHelper('choose', function (a, b) {return a ? a : b;});

然后我们在模板中使用它：）

<p>
{{choose valueFromData 'default-value-in-template'}}
<p>

或者我们当然可以做

    <p>
    {{choose valueFromData defaultValueFromData}}
    <p>

所以在你的情况下：

<form method="{{choose method 'get'}}" action="{{choose action 'action.php'}}" class="menu-edit-form">
...                     
    </form>

希望它能帮助其他人，因为这是从2014年开始的：）

这个问题及其公认的答案都很古老，自编写以来，车把中添加了许多新特性和功能。

我设法通过使用v4.0.0中发布的部分块获得了默认值的功能，所以你的模板最终会是这样的：

<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{#> method}}get{{/method}}" action="{{#> action}}index.php{{/action}}" class="menu-edit-form">
...                     
    </form>
</script>

然后，这只是一个将method和action作为分部传入的例子，方法如下：

var source = $('#menu-edit-form-tpl').html(),
    template = Handlebars.compile(source),
    html = template({}, {
        partials: {
            action: 'contact-form.php'
        }
    });

在生成的html中，方法将默认为get，操作将为contact-form.php。这是一个工作演示：

var source = $('#menu-edit-form-tpl').html(),
    template = Handlebars.compile(source),
    html = template({}, {
        partials: {
            action: 'contact-form.php'
        }
    });
// Code below here only to show output.
document.write('<code>' + $("<div/>").text(html).html() + '</code>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="x-handlebars-template" id="menu-edit-form-tpl">
    <form method="{{#> method}}get{{/method}}" action="{{#> action}}index.php{{/action}}" class="menu-edit-form">
        ...
    </form>
</script>

您可以注册一个helperMissing助手，只要在模板中定义了值，就会调用该助手，但在上下文中则不会调用（如果您不希望丢失的值以静默方式失败，则会很有用）：

Handlebars.registerHelper("helperMissing", function(context, options) {
    console.error("Template defines {{" + context.name + "}}, but not provided in context");
    return "{{" + context.name + "}}";
});
相关文章：