Handlebars.js using ../ to reference parent Context

Question

Lets say I have the following JSON and handlebars.js template:

JSON

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

Template

<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>

The template above works, until I want to filter items - lets say to have 2 lists one odd and the other even, here's a simple template for odd:

<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>

And the registered helper:

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

The helpers work as expected and only the Odd items are rendered, however the reference to the parent context becomes lost, so the {{../rootPath}} directive ~~fails to render~~ renders an empty value.

Is there a way to pass the Parent context through the block Helper?

Answer 1

Change this:

<a href="{{../rootPath}}{{href}}">

to this:

<a href="{{../../rootPath}}{{href}}">

Why? because the if statement is in an inner context so first you need to go up a level and that's why you have to add../

See more details in: https://github.com/wycats/handlebars.js/issues/196