Значение по умолчанию для заполнителя шаблона 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 + "}}";
});