是否有可能让DUST模板循环并交错来自两个不同阵列的元素?

时间:2015-01-13 09:47:55

标签: javascript json dust.js

我正在尝试在Dust中创建一个模板页面,该表格在表格的一个单元格中显示delta_time和elapsed_time。 delta_time和elapsed_times的数据都保存在不同的数组中。

我遇到的问题是我无法找到是否可以从灰尘模板中的不同数组上下文中访问另一个数组上下文。

页面的JSON数据是......

{
"state": {
    "objects": [
        {
            "id": "1",
            "Objectcolour": "#0000FF",
            "delta_times": [0, 7600, 8000, 35400, -300, -260],
            "elapsed_times": [1384342615000, 1384342622600, 1384342630600, 1384342666000, 1384342669000, 1384342671600]
        },
        {
            "id": "2",
            "Objectcolour": "#00FF00",
            "delta_times": [0, 7600, 8000, 35400, -300, -260],
            "elapsed_times": [1384342615000, 1384342622600, 1384342630600, 1384342666000, 1384342669000, 1384342671600]
        }
    ]
}

}

目前Dust模板......

    {#state.objects}
<table>
    <tr>
        <th>ID</th>
        {#distances}
        <th>{split_distances}</th>
        {/distances}
    </tr>
    <tr>
        <th>{id}</th>
        {#elapsed_times}
        <th>{.}
    --Need to add some way to access {#delta_times} here!
                       </th>
        {/elapsed_times}

    </tr>
</table>
    {/state.objects}

我希望决赛桌看起来像这样

<table>
<tr>
    <th> ID </th>
    <th> 0m </th>
    <th> 10m </th>
    <th> 20m </th>
    <th> 30m </th>
    <th> 40m </th>
    <th> 50m </th>
</tr>

<tr>
    <th> 1 </th>
    <th> 11:36:55.0, </th>
    <th> 11:37:02.6, + 7.6</th>
    <th> 11:37:10.6, + 8.0 </th>
    <th> 11:37:46.0, + 35.4</th>
    <th> 11:37:49.0, - 3.0</th>
    <th> 11:37:51.6, - 2.6 </th>        
</tr>
<tr>
    <th> 2 </th>
    <th> 11:36:55.0, </th>
    <th> 11:37:02.6, + 7.6</th>
    <th> 11:37:10.6, + 8.0 </th>
    <th> 11:37:46.0, + 35.4</th>
    <th> 11:37:49.0, - 3.0</th>
    <th> 11:37:51.6, - 2.6 </th>        
</tr>
</table>

我已经删除了上面的示例代码以显示问题,因此我删除了所有Dust帮助程序以正确显示数字以及制作此表所需的其他一些JSON。

目前,我能看到解决此问题的唯一方法是将JSON代码重新映射到不同的结构中,将两个数组连接成一个结构。有没有办法在Dust模板中解决这个问题?感谢。

1 个答案:

答案 0 :(得分:0)

在评论中添加此代码可通过比较两个数组的索引来解决问题。当索引相等时,输出分割。

{#delta_times i=$idx}
  {@eq key=$idx value=i}+ {.}{/eq}
{/delta_times}

然而,这很丑陋,在我看来,通过编写一个小的Dust上下文助手来为你做这个比较和输出会更好。这使您的模板保持轻量级且易于理解。