數據網格handlebars模板

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渲染的網格。我可以迭代通過網格首部並創建表頭，如下所示。

{{#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是referes陣列中的當前項目，它的迭代通過一個特殊的關鍵字。