在把手模板

Question

我最近开始在我的项目中使用handlerbar.js而且它看起来很有趣。太好了，但我正在努力使用模板创建动态数据网格。

我跟随json

gridrow: [
    { col1: 'a', col2: 'b', col3: 'c' }, 
    { col1: 'd', col2: 'e', col3: 'f' }, 
    { col1: 'g', col2: 'h', col3: 'i' }
]

当我创建模板

时

<tbody>
<table id="dt_scroll">
{{#each gridrow}}
    <tr>
        <td>{{col1}}</td>
        <td>{{col2}}</td>
        <td>{{col3}}</td>
    </tr>
{{/each}}
</table>
</tbody>

当我为表dt_scroll声明数据表时显示错误

$invoice_preview.html(theCompiledHtml);
$invoice_form.html('');
$window.resize();
$dt_scroll = $('#dt_scroll');
console.log($dt_scroll.length);
if ($dt_scroll.length) {
    $('#dt_scroll').DataTable({
        "scrollY": "200px",
        "scrollCollapse": false,
        "paging": false
    });
}

Answer 1

我认为问题是浏览器试图解析<table/>。当你尝试时，它会失败。 {{#each gridrow}}不允许作为表格的第一个孩子。

要解决此问题，只需将模板放入脚本标记即可。我还修复了你的HTML，因为它对DataTable插件无效

<div id="invoice_preview"></div>

<script type="x-template" id="dt_scroll">
  <table>
    <thead>
      <tr>
        <th>1.</th>
        <th>2.</th>
        <th>3.</th>
      </tr>
    </thead>
    <tbody>
      {{#each gridrow}}
      <tr>
        <td>{{col1}}</td>
        <td>{{col2}}</td>
        <td>{{col3}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</script>

现在JavaScript代码看起来与此类似。

var context = {title: "My New Post", gridrow: [
    { col1: 'a', col2: 'b', col3: 'c' }, 
    { col1: 'd', col2: 'e', col3: 'f' }, 
    { col1: 'g', col2: 'h', col3: 'i' }
]}

// compile the template
var html = Handlebars.compile($('#dt_scroll').html())(context)

// setting the compiled html
var $invoice_preview = $('#invoice_preview')
$invoice_preview.html(html)

// start the plugin
$invoice_preview.find(">:first-child").DataTable({
  "scrollY": "200px",
  "scrollCollapse": false,
  "paging": false
})