web-dev-qa-db-ja.com

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}}のデフォルト値を指定して、コンパイル済みテンプレートに渡されるオブジェクトでそれらをスキップできますか？

javascripthandlebars.jstemplate-engine
25
MTVS

ハンドルバーには「デフォルト値」はありません。
{{#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>
37
raidendev

これが私の簡単な解決策です

まず、「choose」と呼ばれる非常に基本的なヘルパーを作成します

    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年からですので、それが誰かを助けることを願っています:)

7
Nick Panov

この質問とその受け入れられた回答は非常に古く、多くの新しい機能がハンドルバーに追加されています。

私は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>
7
Andy

helperMissingヘルパーを登録できます。これは、テンプレートで値が定義されているが、コンテキストでは定義されていないときに呼び出されます（欠落している値がサイレントに失敗しないようにする場合に便利です）。

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