web-dev-qa-db-ja.com

../を使用して親コンテキストを参照するHandlebars.js

次のJSONとhandlebars.jsテンプレートがあるとしましょう：

JSON

{ 
  rootPath: '/some/path/',
  items:[ {
    title: 'Hello World',
    href: 'hello-world'
  },  {
    title: 'About',
    href: 'about'
  },  {
    title: 'Latest News',
    href: 'latest-news'
  }
}

テンプレート

<script id="test-template" type="text/x-handlebars-template">

  <ul class="nav">
    {{#each items}}
      <li><a href="{{../rootPath}}{{href}}">{{title}}</a></li>
    {{/each}}
  </ul>

</script>

上記のテンプレートは、アイテムをフィルタリングするまで機能します。たとえば、2つのリストの一方が奇数でもう一方が偶数であるとしましょう。これが奇数の単純なテンプレートです。

<script id="test-template" type="text/x-handlebars-template">

  <ul class="nav">
    {{#each items}}
      {{#isOdd @index}}
        <li><a href="{{../rootPath}}{{href}}">{{title}}</a></li>
      {{/isOdd}}
    {{/each}}
  </ul>

</script>

そして登録されたヘルパー：

// isOdd, helper to identify Odd items
Handlebars.registerHelper('isOdd', function (rawValue, options) {
  if (+rawValue % 2) {
    return options.fn(this);
  } else {
    return options.inverse(this);
  }
});

ヘルパーは期待どおりに動作し、奇数アイテムのみがレンダリングされますが、親コンテキストへの参照が失われるため、{{../rootPath}}ディレクティブ~~レンダリングに失敗~~は空の値をレンダリングします。

親コンテキストをブロックヘルパーに渡す方法はありますか？

javascripttemplateshandlebars.jsmustache
22
hokapoka

修正

<a href="{{../rootPath}}{{href}}"> to this:
<a href="{{../../rootPath}}{{href}}">

どうして？ ifステートメントは内部コンテキストにあるため、最初にレベルを上げる必要があるため、.. /を追加する必要があります。

詳細は以下を参照してください https://github.com/wycats/handlebars.js/issues/196

44
Francisco Goldenstein