Javascript 如何使用手柄渲染表中的数据？

我试图弄清楚如何使用手柄在表中呈现一些数据

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

<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

部分的其余部分，我不知道如何呈现其余的信息。 应该是这样的：

<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文件的数据

投资方法
在线 的
在线与专业投资组合管理
和一个顾问
简单、直接的定价
$6.95在线股票和ETF交易3
（有资格获得$0优先奖励交易）2其他费用可能适用3
0.45%年费
其他费用可能适用
0.85%的年度计划费用
可能会收取其他费用
最低投资
无
5000美元
20000美元
投资选择
全方位投资
一套ETF策略
一套共同基金/ETF策略
只需一次登录即可进行银行和投资
✓
✓
✓

---

有什么建议吗？

因为您的表体是对象数组。您可以循环使用这些密钥访问数据

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

{{{#每个图表.表头}
{{{#如果th image.length}

{{/if}
{{{th title}}}
{{{th description}}}

{{/每个}}
{{{#每个图表.表格体}
{{这是你的钥匙}
{{这是你的钥匙}
{{这是你的钥匙}
{{这是你的钥匙}
使用以下代码段解决此问题：

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


{{#每个表头}
{{{#如果th image.length}

{{/if}
{{th title}}
{{th description}}

{{/每个}}
{{#每个表体}
{{key1}}
{{key2}}
{{key3}}
{{key4}}
问题是您没有将车把封装在
标签中。Handlebar将不正确地编译模板，而不会抛出任何错误。对于
div
它似乎总是有效的

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

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


{{{每辆车}
{{Id}
{{Make}
{{Model}}
{{/每个}}
这样试试{{{#每个数组}}{{@index}}{{{/each}}@KaushikThanki我知道。我的问题是表格的逻辑。把手如何容纳数据。你能详细说明一下你的答案吗？请注意，我的json应该是什么样子？{“表头”：[{“th title”：……}]，“表体”：[{“key1”：“value1”，“key2”：“value2”…}}}好的，这里是Dinesh，Gilfoyle。但是，我的json应该是什么样子呢？这取决于您。例如：表体：[{td_data1:“data1”、td_data2:“data2”、td_data3:“data3”、td_data4:“data4”}
<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>