web-dev-qa-db-ja.com

elseifのhandlebarjsカスタムヘルパー

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

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

しかし、これは機能しません。 ELSE IFをハンドルバーで行うにはどうすればよいですか?カスタムヘルパーを書くことが唯一の選択肢ですか?はいの場合は、このヘルパーを作成するためのいくつかのポインターを提供してください。

20
Hector Barbossa

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

10

ハンドルバーの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}}

そのようなことはすぐに厄介になるので、おそらくそれをしたくないでしょう。より良いアプローチは(ハンドルバーではいつものように)ロジックをJavaScriptにプッシュして、最大でtype.onetype.twotype.three、...のいずれかが真になるようにすることです。次に、次のことができます。

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

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

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}}
21
mu is too short

フレームワークのように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/

4
Mohan Kumar

スイッチの動作が必要な場合は、 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 です。

1
Hadrien TOMA

あなたはこれを行うことができます:

{{#if type.one}}
  ...
{{else}} {{#if type.two}}
  ...
{{else}} {{#if type.three}}
  ...
{{else}}
  ...
{{/if}}{{/if}}{{/if}}
1
drinor

OPが記述した正確な構文は、今日のカナリアでember-htmlbars-inline-if-helper機能フラグを有効にしてEmberカナリアで機能します。

0
Mitch