20

Handlebars.js を使い始めました。else ifのような組み込みの条件はないようです。私はこのようなものが欲しいです

{{#if type.one }}
     do something ... IF
{{else if type.two}}
     do something ... ELSE IF
{{else}}
     do something ... ELSE
{{/if}}

しかし、これはうまくいきません。ハンドルバーで ELSE IF を実行するにはどうすればよいですか? カスタムヘルパーを書くことが唯一の選択肢ですか? もしそうなら、このヘルパーを書くためのいくつかの指針を提供してください。

4

6 に答える 6

21

Handlebars の if-ish ヘルパーは "if" 部分と "else" 部分の 2 つの部分しか理解できないため、カスタム ヘルパーではこれを行うことはできません。ただし、ネストすることはできます。

{{#if type.one}}
    do something ... IF
{{else}}
    {{#if type.two}}
        do something ... ELSE IF
    {{else}}
        {{#if type.three}}
            ...
        {{else}}
            ...
        {{/if}}
    {{/if}}
{{/if}}

そのようなことはすぐに厄介になるので、おそらくやりたくないでしょう。より良いアプローチは (Handlebars でいつものように) JavaScript にロジックをプッシュして、最大でもtype.one, type.two, type.three, ... の 1 つが true になるようにすることです。次に、次のことができます。

{{#if type.one}}
    ...
{{/if}}
{{#if type.two}}
    ...
{{/if}}
{{#if type.three}}
    ...
{{/if}}

多くのオプションがあるtype場合、または のボディ{{#if}}が複雑な場合は、パーシャルに切り替えることができます。ただし、テンプレート変数に基づいて部分的な名前を作成するには、カスタム ヘルパーを追加する必要があります。このようなもの：

Handlebars.registerHelper('show_type', function(type) {
    var types = ['one', 'two', 'three'];
    var partial;
    for(var i = 0; i < types.length; ++i) {
        if(!type[types[i]])
            continue;
        partial = '_partial_' + types[i];
        break;
    }
    if(partial)
        return Handlebars.partials[name](this);
    else
        return '';
});

そして、パーシャルがすべて登録され、一貫した名前が付けられていると仮定すると、次のように言えます。

{{show_type type}}
于 2012-10-31T19:31:40.133 に答える
10

Handlebars 3.0 以降、OP で記述された構文はそのまま使用できます。詳細については、 https : //github.com/wycats/handlebars.js/pull/892 を参照してください。

注: Ember の場合、バージョン 1.10 以降ではこれも機能します。参照: http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_chained-else-blocks

于 2015-02-19T08:25:22.073 に答える
4

フレームワークのような ember を使用している場合は、

{{#if isAtWork}}
     Ship that code!
{{else if isReading}}
      You can finish War and Peace eventually...
{{/if}}

リンク : http://guides.emberjs.com/v1.12.0/templates/conditionals/

于 2015-06-18T13:25:02.950 に答える
1

スイッチの動作が必要な場合は、 Dan Harper のヘルパーに興味があるかもしれません。次のようなことができます。

{{#is type 1}}
    <p>Do something when 1.</p>
{{else}}{{#is type 2}}
    <p>Do something when 2.</p>
{{else}}{{#is type 3}}
    <p>Do something when 3.</p>
{{/is}}{{/is}}{{/is}}

ここにjsfiddleがあります。

于 2015-05-24T15:48:23.097 に答える
0

OP が記述した正確な構文は、現在、 ember-htmlbars-inline-if-helper機能フラグが有効になっている Ember Canary で機能します。

于 2015-02-08T18:01:49.320 に答える