如何使用把手在表格中呈現數據？

我想弄清楚如何在使用把手的表格中呈現一些數據。如何使用把手在表格中呈現數據？

我已經有頭部的部分。我做了這樣的：

<thead> 
    <tr> 
     {{#each chart.table-header}} 
      <th> 
       {{#if th-image.length}} 
        <p><img src="/assets/images/{{th-image}}" alt=""></p> 
       {{/if}} 
       <strong>{{{th-title}}}</strong> 
       <p>{{{th-description}}}</p> 
      </th> 
     {{/each }} 
    </tr> 
</thead>

在這裏，我chart.json：

{ 
    "table-header" : [ 
     { 
     "th-title": "", 
     "th-description": "", 
     "th-image": "", 
     "special-case": "" 
     }, 
     { 
     "th-title": "Online Investing", 
     "th-description": "Make more informed...", 
     "th-image": "MESDicon.png", 
     "special-case": "" 
     }, 
     { 
     "th-title": "Merrill Edge Guided Investing", 
     "th-description": "Go online to...", 
     "th-image": "MEGIicon.png", 
     "special-case": "" 
     }, 
     { 
     "th-title": "Invest with an advisor", 
     "th-description": "Get professional...", 
     "th-image": "MEACicon.png", 
     "special-case": "" 
     } 
    ], 

    "table-body" : [ 
     { 
      // HERE GOES THE INFO FOR THE TBODY ELEMENT. 
     } 
    ] 
}

但tbody剩下的部分我不知道我怎樣才能使信息的其餘部分。它應該看起來像這樣：

但這個想法是呈現來自chart.json文件的數據。

<tbody> 
    <tr> 
     <td>Investing method</td> 
     <td>Online</td> 
     <td>Online with professional portfolio management</td> 
     <td>With an advisor</td> 
    </tr> 
    <tr> 
     <td>Simple, straight-forward pricing</td> 
     <td><strong>$6.95 online equity & ETF trades<sup>3</sup></strong><br>(Qualify for $0 trades with Preferred Rewards)<sup>2</sup> Other fees may apply<sup>3</sup> </td> 
     <td><strong>0.45% annual fee</strong><br>Other fees may apply</td> 
     <td><strong>0.85% annual program fee</strong><br>Other fees may apply</td> 
    </tr> 
    <tr> 
    <td>Minimum investment</td> 
     <td><strong>None</strong></td> 
     <td><strong>$5,000</strong></td> 
     <td><strong>$20,000</strong></td> 
    </tr> 
    <tr> 
     <td>Investment choices</td> 
     <td><strong>Full range of investments</strong></td> 
     <td><strong>A set of ETF strategies</strong></td> 
     <td><strong>A set of mutual fund/ETF strategies</strong></td> 
    </tr> 
    <tr> 
     <td>Bank & invest with one login</td> 
     <td>&#10003;</td> 
     <td>&#10003;</td> 
     <td>&#10003;</td> 
    </tr> 

</tbody>

有什麼建議嗎？

來源

2017-06-12 TheUnnamed

嘗試這種方式 {{#each陣列}} {{@index}} {{/每}} –

@ KaushikThanki我知道這一點。我的問題是表格的邏輯。 handlebars如何容納數據。你能詳細解釋一下你的答案嗎？請 – TheUnnamed

因爲你的表體是對象數組。您可以循環訪問並使用可以訪問數據的密鑰。

<thead> 
    <tr> 
     {{#each chart.table-header}} 
      <th> 
       {{#if th-image.length}} 
        <p><img src="/assets/images/{{th-image}}" alt=""></p> 
       {{/if}} 
       <strong>{{{th-title}}}</strong> 
       <p>{{{th-description}}}</p> 
      </th> 
     {{/each }} 
    </tr> 
</thead> 

    <tbody> 

    {{#each chart.table-body}} 

     <tr> 
     <td>{{this.your_key}}</td> 
     <td>{{this.your_key}}</td> 
     <td>{{this.your_key}}</td> 
     <td>{{this.your_key}}</td> 
     </<tr> 

    {{/each}} 

</tbody>

來源

2017-06-12 05:50:59

好吧Dinesh，Gilfoyle在這裏。但是，我的json應該如何？ – TheUnnamed

這取決於你。 ex：table-body：[{td_data1：「data1」，td_data2：「data2」，td_data3：「data3」，td_data4：「data4」} .. etc] –

使用下面的代碼片段來解決問題：

<thead> 
    <tr> 
     {{#each table-header}} 
      <th> 
       {{#if th-image.length}} 
        <p><img src="/assets/images/{{th-image}}" alt=""></p> 
       {{/if}} 
       <strong>{{th-title}}</strong> 
       <p>{{th-description}}</p> 
      </th> 
     {{/each }} 
    </tr> 
</thead> 

<tbody> 
    {{#each table-body}} 
     <tr> 
      <td>{{key1}}</td> 
      <td>{{key2}}</td> 
      <td>{{key3}}</td> 
      <td>{{key4}}</td> 
     </<tr> 
    {{/each}} 
</tbody>

來源

2017-06-12 05:55:12

但是，我的json應該如何？ – TheUnnamed

{「table-header」：[{「th-title」：......}]，「table-body」：[{「key1」：「value1」，「key2」：「value2」.. ...}]} –

如何使用把手在表格中呈現數據？

回答

相關問題