on handlebars.js, how do you use #first on a parent level?

Question

Using handlebars.js, I can display the 1st element of an array on the same level as shown here:

{{#each array01}}
    {{#if @first}}{{objectAttribute01}}{{/if}}
{{/each}}

but if I have a nested array like the one shown below, how do I check for the 1st element of array03, instead of array01?

{{#each array03}}
    {{#each array02}}
         {{#each array01}}
             {{#if @first}}{{objectAttribute01}}{{/if}}
         {{/each}}   
    {{/each}}   
{{/each}}  

The following didn't work:

@../../first 

Answer 1

i resolved my issue by using a custom function that collects the parent index:

javascript:

var indexLevel01 = 0;
var indexLevel02 = 0;

function setIndexLevel01(indexEntry)
    {indexLevel01 = indexEntry;}

function setIndexLevel02(indexEntry)
    {indexLevel02 = indexEntry;}

function onlyShowFirstOfLevel01(attributeEntry)
    {//start onlyShowFirstOfLevel01
        if(indexLevel01 === 0 && indexLevel02 === 0)
            {return attributeEntry}
        else{return ""}
    }//end onlyShowFirstOfLevel01

html:

{{#each array03}}
    {{#each array02}}{{setIndexLevel01 @index}}
         {{#each array01}}{{setIndexLevel02 @index}}
             {{onlyShowFirstOfLevel01 objectAttribute01}}
         {{/each}}   
    {{/each}}   
{{/each}}

Answer 2

FWIW

What you tried should have worked.

{{#if @../../first}}

See snippet:

var data = {
  array03: [{
    array02: [{
      array01: [{
        objectAttribute01: 'foo'
      }]
    }]
  }, {
    array02: [{
      array01: [{
        objectAttribute01: 'bar'
      }]
    }]
  }]
};

var source = $('#entry-template').html();
var template = Handlebars.compile(source)(data);

$('body').html(template)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
{{#each array03}}
    {{#each array02}}
         {{#each array01}}
             {{#if @../../first}}{{objectAttribute01}}{{/if}}
         {{/each}}   
    {{/each}}   
{{/each}} 
</script>

Answer 3

Handlebars supports the ../ path segment. This segment references to the parent template scope. Using ../ is only necessary when context changes

Coming to your code,

{{#each array03}}
     {{#each array02}}
         {{#each array01}}
             {{#if @first}}{{objectAttribute01}}{{/if}}
        {{/each}}   
    {{/each}}   
{{/each}} 

change it to:

{{#each array03}}
     {{#each array02}}
          {{#each array01}}
              {{#if @../../first}}{{objectAttribute01}}{{/if}}
        {{/each}}   
     {{/each}}   
{{/each}}

You can access the first element of array03 and array02 like @../../first and @../first respectively.