Question

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

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

我可以为{{method}}和{{action}}指定默认值，并在传递给已编译模板的对象中跳过它们吗？

Answer 1

把手没有＆＃34;默认值＆＃34;。
您应该使用{{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>

Answer 2

这是我的简单解决方案

首先我们创建一个名为＆＃39;选择＆＃39;

的非常基本的帮助器

    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年开始:)）

Answer 3

这个问题及其接受的答案已经很老了，自从它们被编写以来，车把已经添加了许多新的特性和功能。

我设法通过使用在v4.0.0中发布的partial blocks来获取默认值的功能 - 因此您的模板最终会如下所示：

<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>

Answer 4

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

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

Handlebars`模板占位符的默认值

4 个答案: