Question

我试图弄清楚如何使用Handlebars在表格中渲染一些数据。

我已经有了标题的部分。我是这样做的：

<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>

有什么建议吗？

Answer 1

因为你的表体是对象数组。你可以遍历它并使用密钥来访问数据。

<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>

Answer 2

使用下面的代码段解决问题：

<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>

Answer 3

问题是您没有将车把放在<script>标记中。把手将错误地编译模板而不会引发任何错误。对于div，它似乎总是可以正常工作。

因此只需将模板部分包装在script标记中，如下所示：

<script type="text/x-handlebars-template" id="carBladeTemplate">
{{#each cars}}    
    <tr class="carItem" data-car-id="{{Id}}">
        <td>{{Id}}</td>
        <td>{{Make}}</td>
        <td>{{Model}}</td>
    </tr>                   
{{/each}}
</script>

如何使用Handlebars在表格中呈现数据？

3 个答案: