Question

我最近开始在我的项目中使用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的任何更好的方法？

感谢 keth

Answer 1

表首先呈现行然后列，因此应使用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>

this是一个特殊的关键字，它引用了它所迭代的数组中的当前项。

数据网格的车把模板

1 个答案: