Question

有没有办法更简单地加载把手模板？看起来似乎很容易做到。如果我有index.html的以下代码：

<body>
  <h1>From the index.html</h1>
  <div id="hbs"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
  <script id="test" type="text/x-handlebars-template">
      <h2>This is from HBS</h2>
      <p>
        hbs generated this p tag!
      </p>
    </script>
    <script src="js/script.js"></script>
</body>

以下是在js/script.js中编译模板的脚本代码：

var template = Handlebars.compile(document.querySelector("#test").innerHTML)
document.querySelector("#hbs").innerHTML = template({})

这很好用，但是当我打开index.html时，我可以看到通过模板生成的标题和p标记。必须有一种简单的方法将此模板抽象为单独的文件！

Answer 1

您可以将模板放在hbs文件中：

template.hbs：

<script type="text/x-handlebars-template">
      <h2>This is from HBS</h2>
      <p>
        hbs generated this p tag!
      </p>
</script>

然后使用ajax获取您的文件而不是querySelector来获取您的html

$document.ready(function(){
   $.get( '/url/template.hbs', function( source ) {
      var template = Handlebars.compile(source);
      document.querySelector("#hbs").innerHTML = template({});
   }
});

将把手模板抽象为没有AJAX的外部文件

1 个答案: