The problem is setup on JSFiddle: https://jsfiddle.net/sshadmand/fNPvf/16812/
Given ...
The data passed to the template is:
{
"curr_level": 0,
"levels" : [item1, item2, item3 ...]
}
The handlebars template is:
<div>
{{#each levels}}
{{../curr_level}} == {{@index}}
{{#ifeq ../../curr_level @index}}yes{{else}}no{{/ifeq}}
{{/each}}
</div>
The #ifeq helper function is:
Handlebars.registerHelper('ifeq', function(val1, val2, options) {
console.log("if equal", val1, typeof(val1), val2, typeof(val2));
if (val1 == val2){
return options.fn(this);
}
return options.inverse(this);
});
The problem is:
Accessing the parent curr_level variable using ../ works to print the value to the screen, but when the curr_level variable is sent to the helper it is undefined. I have tried passing different depths to the helper e.g. curr_level, ../curr_level, ../../curr_level etc
For all depths "val1" in the helper is undefined. Again, I am able to access the curr_level variable when it is not using the comparison helper.
Note: This is similar to, but very different from this SO question asking about parents. The main difference being I am trying to pass the parent variable to a helper function: Access properties of the parent with a Handlebars 'each' loop