次のようなカスタムヘルパーがあります。
Handlebars.registerHelper('hasAccess', function(val, fnTrue, fnFalse) {
return val > 5 ? fnTrue() : fnFalse();
});
そして私のテンプレートは次のとおりです。
{{#hasAccess this.access}}
You have access!
{{else}}
You do not have access
{{/hasAccess}}
FnFalseが定義されていないことを除いて、機能します。では、「else」ブランチをどのようにレンダリングするのでしょうか。
ハンドルバーは、適用するさまざまな関数を含むオブジェクトをカスタムヘルパーに提供します。options.fn
およびoptions.inverse
。 https://handlebarsjs.com/guide/block-helpers.html#conditionals を参照してください
あなたのヘルパーは次のように書くことができます
Handlebars.registerHelper('hasAccess', function(val, options) {
var fnTrue = options.fn,
fnFalse = options.inverse;
return val > 5 ? fnTrue(this) : fnFalse(this);
});
そしてデモ
Handlebars.registerHelper('hasAccess', function(val, options) {
var fnTrue = options.fn,
fnFalse = options.inverse;
return val > 5 ? fnTrue() : fnFalse();
});
var template = Handlebars.compile($('#tpl').html() );
$("body").append( "<h1>access : 1</h1>" );
$("body").append( template({access:1}) );
$("body").append( "<h1>access : 6</h1>" );
$("body").append( template({access:6}) );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script type='text/template' id='tpl'>
{{#hasAccess this.access}}
You have access!
{{else}}
You do not have access
{{/hasAccess}}
</script>