Question

查看即将发布的数据：

data: {
    content: [
    [
    "School Name",
    "Location",
    "Type",
    "No. eligible pupils",
    "Average points per student",
    "Average points per exam entry",
    "% obtaining two facilitating subjects"
    ],
    [
    "Colchester Royal Grammar School",
    "Colchester",
    "State",
    "349",
    "1428",
    "263.3",
    "77%"
    ], and so on...
 ]
}

我正在尝试遍历这个数组数组，以创建一个表。因此，对于每个数组，我需要将它包装在<tr></tr>中，并且对于每个数组中的每个元素，我需要将它包装在<td></td>中。我需要区分第一行以使用<thead>和<th>，但目前我正试图绕过正确的结构。

我的代码所做的只是创建一个包含整个内容的<td>，而不是多个<tr>或<td>。

        {{#each data.content}}

            <tr>

                {{#each this}}
                    <td>{{ this }}</td>
                {{/each}}

            </tr>

        {{/each}}

Answer 1

你不能直接使用你的模板中的数据。因为你正在将数据对象传递给已编译的模板函数。所以你应该使用它来引用当前的上下文。

更好地使用块参数来避免更多这样的引用。这将使代码不易理解

没有块参数

{{#each this.content}} 
     <tr>
        {{#each this}} 
            <td>{{ this }}</td> 
        {{/each}} 
     </tr>
 {{/each}}

使用块参数，

{{#each this.content as | rowKey, row |}} 
         <tr>
            {{#each row as | colKey, column|}} 
                <td>{{ column }}</td> 
            {{/each}} 
         </tr>
 {{/each}}

当模板变大时，它具有更多优势

无法使用把手循环多维数组

1 个答案: