1

我最近开始在我的项目中使用 handlerbar.js，它看起来很有趣。到目前为止一切都很好，但我在使用模板创建动态数据网格方面遇到了困难。

我有以下 json

grid : [
{
   question : 'Grid Question 1',
   gridheader : [
          {header : 'header1'},
          {header : 'header2'},
          {header : 'header3'}
        ],
   gridrow : [
        {row1 : 'a', row2 : 'b', row3 : 'c'},
        {row1 : 'd', row2 : 'e', row3 : 'f'},
        {row1 : 'g', row2 : 'h', row3 : 'i'}
         ]
}
]

在这里，我想使用上面的 json 渲染一个网格。我可以遍历 gridheader 并按如下方式创建表头。

{{#omhrs.grid}}
<div>{{question}}</div>
   <table>
     <tr>
    {{#gridheader}}
        <th>{{header}}</th>
    {{/gridheader}}
     </tr>
       </table>
{{/omhrs.grid}}

但我正在努力创建其余的数据部分。你们知道如何使用现有的上述 json 结构来实现这一点吗？或者任何更好的为网格构建 json 的方法？

谢谢凯思

4

1 回答 1

4

表格先呈现行然后呈现列，因此gridrow应该使用col而不是真正准确地描述您的结构row（如果您的数据不是按此顺序，您需要在将数据集呈现到模板之前进行一些预处理工作以转换您的数据集）：

gridrow: [
    { col1: 'a', col2: 'b', col3: 'c' }, 
    { col1: 'd', col2: 'e', col3: 'f' }, 
    { col1: 'g', col2: 'h', col3: 'i' }
]

模板中输出gridRow数据的部分是这样的：

<tbody>
{{#each gridrow}}
    <tr>
        <td>{{col1}}</td>
        <td>{{col2}}</td>
        <td>{{col3}}</td>
    </tr>
{{/each}}
</tbody>

请参阅小提琴以获取完整的工作代码：http: //jsfiddle.net/amyamy86/LG5Fp/

编辑：如果要生成动态网格：

数据可能是（数组数组）：

gridrow: [
    ['a', 'b', 'c'], 
    ['d', 'e', 'f'],
    ['g', 'h', 'i']
]

那么模板将是：

<tbody>
{{#each gridrow}}
    <tr>
        {{#each this}}
            <td>{{this}}</td>
        {{/each}}
    </tr>
{{/each}}
</tbody>

Thethis是一个特殊的关键字，它引用它正在迭代的数组中的当前项。

于 2013-04-14T17:32:24.270 回答