Handlebar table createion with 3 inside each helper problem

Question

Suppose i have 3 dummy array :

let dummyArray = [0,1,2,3,4];
let dummyArray2 = [0,1,2,3];
let dummyArray3 = [{data:'d1'},{data:'d2'}];

and i want create table with these array like this:

<table class="table">
        <thead>
            <tr>
                <th>col-0</th>
                <th>col-1</th>
                <th>col-2</th>
                <th>col-3</th>
                <th>col-4</th>
            </tr>
        </thead>
        <tbody>
            {{#each dummyArray}}
            <tr>
                <td>row</td>
                {{#each ../dummyArray2}}
                <td>
                    {{#each ../../dummyArray3}}
                        {{this.data}}
                    {{/each}}
                </td>
                {{/each}}
            </tr>
            {{/each}}
        </tbody>
    </table>

but i get unexpected result, some cells in the table are empty.

Demo: https://jsfiddle.net/PouyaAk/m7g31e8y/32/

Answer 1

Use of @root is solving the problem, see below, however it's still intriguing to me why your code works that way - but I haven't used handelbarsjs for a quite while

<table class="table">
            <thead>
                <tr>
                    <th>col-0</th>
                    <th>col-1</th>
                    <th>col-2</th>
                    <th>col-3</th>
                    <th>col-4</th>
                </tr>
            </thead>

            <tbody>
                {{#each dummyArray}}
                <tr>
                    <td>row</td>
                    {{#each @root.dummyArray2}}
                    <td>
                        {{#each @root.dummyArray3}}
                            {{this.data}}
                        {{/each}}
                    </td>
                    {{/each}}
                </tr>
                {{/each}}
            </tbody>

        </table>

Edit: the code below fills only previously empty cells, leaving the rest of them empty ... strange

<tbody>
                {{#each dummyArray}}
                <tr>
                    <td>row</td>
                    {{#each ../dummyArray2}}
                    <td>
                        {{#each ../dummyArray3}}
                            {{this.data}}
                        {{/each}}
                    </td>
                    {{/each}}
                </tr>
                {{/each}}
            </tbody>