在 Table 中使用把手 {{each}}

Question

我已经查看了关于如何在 HTML table 中使用 Handlebars 中的每个助手的堆栈溢出的其他问题，但是当我这样做时，它没有正确读取每个函数，除非我把它放在标签里。我在网上看到这是如何完成的，但出于某种原因它对我不起作用。我正在调用的数据在页面上加载正常，因为如果我将助手放入它就可以工作。

<div class="container" id="content">
        <template id="stemplate">
           <table>
              <tr>
                <th>Date</th>
                <th>Open</th>
              </tr>
              <tr class="tData">
                {{#each values}}
                  <td>{{date}}</td>
                  <td>{{open}}</td>
                {{/each}}
              </tr>   
            </table>
          </template>
      </div>
    </div>

Answer 1

例子

Html

 <table id="stemplate">
        <thead>
            <tr>
                <th>Date</th>
                <th>Open</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

<script id="table-template" type="text/x-handlebars-template">
    {{#each this}}
    <tr>
        <td>{{date}}</td>
        <td>{{open}}</td>
    </tr>
    {{/each}}
</script>

Js

$(function() {

    var template = Handlebars.compile($("#table-template").html());
    var data = [{
        date: "01.01.2017",
        open: true
    }, {
        date: "01.01.2018",
        open: false
    }];

    $('#stemplate tbody').html(template(data));
});

Example Link

在 Table 中使用把手 {{each}}

Using Handlebars {{each}} in a Table

html

handlebars.js