web-dev-qa-db-ja.com

ハンドルバーテンプレートのifブロック内でヘルパーを呼び出す

私はHandlebars.jsテンプレートエンジンを使用していて、次のような方法を考案しようとしています（不自然な例）：

{{#if itemSelected "SomeItem"}}
    <div>This was selected</div>
{{/if}

ここで、itemSelectedは次のような登録済みヘルパーです。

Handlebars.registerHelper("itemSelected", function(item) {
    var selected = false;
    // Lots of logic that determines if item is selected
    return selected;
});

この構文をテンプレートに使用しようとするとエラーが発生し、このようなことを示す例は見つかりません。このような単純な#ifブロックが表示されます...

{{#if myValueInContext}}
    <div>This will show if myValueInContext results in a truthy value.</div>
{{/if}}

しかし、私は最初の例に取り組む方法を理解することができません。たぶん私はこの間違ったところに近づいています。

ちなみに、質問にHandlebarsタグを追加できなかったため、このMustacheにタグを付けました。

javascripthandlebars.jsclient-templates
34
Kevin

これでうまくいくとは思いません。ハンドルバーのドキュメントが正しいことを理解していれば、＃if自体が登録済みのブロックヘルパーであり、別の登録済みのヘルパーを引数として取りません。

ドキュメントによると、あなたはそれをそのように実装するかもしれません


Handlebars.registerHelper('ifItemSelected', function(item, block) {
  var selected = false;
  // lots of logic that determines if item is selected

  if(selected) {
    return block(this);
  }
});

その後、あなたはそれを呼び出すことができるはずです


{{#ifItemSelected SomeItem}}
    This was selected
{{/ifItemSelected}

SomeItemの形式が正しいことを確認する必要があります。登録されたハンドラーをifステートメントで条件付きとして使用する方法がわかりません。

36
Steffen

埋め込みヘルパーの呼び出しを括弧で囲んでください：

{{#if (itemSelected "SomeItem")}}
    <div>This was selected</div>
{{/if}

私は実験を行い、それがうまくいくことを確認しました。

ハンドルバーのドキュメントに記載されているかどうかは不明です。私は handlebars-layouts の例からトリックを学びました。

97
gnowoel

ハンドルバーの最新バージョン（1.0.rc.1）では、次のように書く必要があります。

Handlebars.registerHelper('ifItemSelected', function(item, options) {
  var selected = false;
  // lots of logic that determines if item is selected

  if (selected) {
    return options.fn(this);
  }
});

すなわち。 block（this）はoptions.fn（this）に置き換えられます

http://handlebarsjs.com/block_helpers.html#conditionals

44
jgraglia

Elseオプションも必要な場合は、次のコードが必要です。

Handlebars.registerHelper('ifItemSelected', function(item, options) {
  var selected = false;
  // lots of logic that determines if item is selected

  if (selected) {
    return options.fn(this);
  }
  else {
   return options.inverse(this);
 }
});

一緒に使用：

{{#ifItemSelected SomeItem}}
    This was selected
{{else}}
    This was not selected
{{/ifItemSelected}
5
Fiona - myaccessible.website