Значение по умолчанию для заполнителя шаблона Handlebars

Могу ли я указать значение по умолчанию для заполнителя шаблона Handlebars?

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

Могу ли я указать значения по умолчанию для {{method}} и {{action}} и пропустить их в объекте, который передается скомпилированному шаблону?

Ответы

Ответ 1

Ручки не имеют значений по умолчанию.
Вы должны использовать инструкцию {{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>

Ответ 2

Вот мое простое решение

сначала мы создаем очень простой помощник, называемый "выбрать"

    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 года:)

Ответ 3

Этот вопрос и его принятый ответ довольно стары, и с тех пор, как они были написаны, в рули было добавлено много новых функций и возможностей.

Мне удалось получить функциональность значений по умолчанию с помощью частичных блоков, которые были выпущены в 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>

Ответ 4

Вы можете зарегистрировать помощник helperMissing, который будет вызываться, когда значение определено в вашем шаблоне, но не в вашем контексте (полезно, если вы не хотите, чтобы отсутствующие значения терпели неудачу):

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