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 を使用してグリッドをレンダリングします。次のように、グリッドヘッダーを反復処理してテーブル ヘッダーを作成できます。

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

しかし、残りのデータ部分の作成に苦労しています。上記の既存のjson構造を使用してこれを達成する方法を知っていますか。または、グリッドのjsonを構造化するためのより証明された方法はありますか?

ありがとうケス

4

1 に答える 1

4

テーブルは行が最初にレンダリングされ、次に列がレンダリングされるため、構造は代わりに をgridrow使用して非常に正確に記述される必要があります (データがこの順序でない場合は、データセットをテンプレートにレンダリングする前に、データセットを変換するための前処理作業を行う必要があります)。colrow

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 に答える