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/

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>

在每个助手问题中都有3个手把表的创建

1 个答案: