35

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

しかし、最初の例に取り組む方法がわかりません。多分私はこれに間違って近づいています。

ちなみに、質問にハンドルバータグを追加できなかったので、この口ひげにタグを付けました。

4

4 に答える 4

108

埋め込みヘルパーの呼び出しを括弧で囲む必要があります。

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

私は実験を行い、それが機能することを確認しました。

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

于 2015-06-23T17:59:58.930 に答える
43

Handlebars の最新バージョン (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

于 2012-12-26T09:29:49.563 に答える
37

これはうまくいかないと思います。ハンドルバーのドキュメントが正しいことを理解していれば、#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 ステートメントの条件として使用する方法がわかりません。

于 2011-06-13T13:07:52.663 に答える
5

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}
于 2014-10-03T09:49:32.747 に答える