handlebars.js - Handlebar table create with 3 inside each helper问题

Question

假设我有 3 个虚拟数组：

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

我想用这些数组创建表，如下所示：

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

但我得到了意想不到的结果，表格中的一些单元格是空的。

演示：https ://jsfiddle.net/PouyaAk/m7g31e8y/32/

标签： handlebars.js

Answer 1

使用@root解决了问题，见下文，但我仍然很感兴趣为什么你的代码会这样工作——但我已经有一段时间没有使用handelbarsjs了

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

编辑：下面的代码只填充以前空的单元格，其余的都是空的......奇怪

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