Question

我正在尝试使用ajax调用返回的数据填充表。我使用handlebars作为模板引擎。我很明显在客户端这样做。我发现很多问题（here，here和here）询问是否从对象数组中填充模板。我尝试过所有这些都没有成功。我尝试的最后一个版本如下。

模板嵌入在script标记中。

<script id="resultTableTpl" type="text/template">
<table  class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Regd. No.</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    {{#each this}}
        <tr>
          <td>{{id}}</td>
          <td>{{regd_id}}</td>
          <td>{{type}}</td>
        </tr>
    {{/each}}
  </tbody>
</table>    
</script>

这是填充模板的调用。

<script>
$("#submitSearch").on('click', function(e) {
    e.preventDefault();
    $.getJSON(...)
    .done(function(data) {
        template = Handlebars.compile($("#resultTableTpl").html());
        $("#myDiv").replaceWith(template(data));
    })
    .fail(function(){
        alert("failure");
    });
});
</script>

从ajax调用获得的JSON数据是：

       [ 
        {id: 123, regd_id: "KA-123", type: "3w"}
        , {id: 345, regd_id: "KA-345", type: "4w"}
        , {id: 567, regd_id: "KA-567", type: "5w"}
        ]

这应该使用表格填充div myDiv。我的测试JSON数据有一个包含三个对象的数组。生成的表有三行，包含三列。我错过了什么？我正在使用来自exphbs的车把的快速风格。

迭代对象数组以填充把手模板

0 个答案: