Handlebars.jsを使い始めました。 elseifのような組み込み条件はないようです。こんなものが欲しい
{{#if type.one }}
do something ... IF
{{else if type.two}}
do something ... ELSE IF
{{else}}
do something ... ELSE
{{/if}}
しかし、これは機能しません。 ELSE IFをハンドルバーで行うにはどうすればよいですか?カスタムヘルパーを書くことが唯一の選択肢ですか?はいの場合は、このヘルパーを作成するためのいくつかのポインターを提供してください。
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
ハンドルバーの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.one
、type.two
、type.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}}
フレームワークのように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/
スイッチの動作が必要な場合は、 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 です。
あなたはこれを行うことができます:
{{#if type.one}}
...
{{else}} {{#if type.two}}
...
{{else}} {{#if type.three}}
...
{{else}}
...
{{/if}}{{/if}}{{/if}}
OPが記述した正確な構文は、今日のカナリアでember-htmlbars-inline-if-helper
機能フラグを有効にしてEmberカナリアで機能します。