javascript - Handlebars.js 将脚本标签与 html 文档分开

Question

从 html 文档中分离如下脚本标记的最佳方法是什么？

<ul class="shoesNav">
 <script id="shoe-template" type="x-handlebars-template">
  {{#each this}}
       <li class="shoes">
            <a href="/{{name}}">{{name}} -- Price: {{price}} </a>
       </li>
   {{/each}}
 </script>

</ul>

有没有可能有这样或类似的东西？

<ul class="shoesNav">
  {{#each this}}
       <li class="shoes">
            <a href="/{{name}}">{{name}} -- Price: {{price}} </a>
       </li>
   {{/each}}
</ul>

这个想法是将所有模板放在一个单独的文件中。

Answer 1

你真的应该把它们分开，有一个与你的 html 页面分开的把手模板，然后将模板加载到 div 中。

所以它会是

<div id="shoes">
</div>    

然后将单独的文件模板加载到该 div 中。

'<script id="shoe-template" type="x-handlebars-template">
  <ul class="shoesNav"> 
  {{#each this}}
      <li class="shoes">
        <a href="/{{name}}">{{name}} -- Price: {{price}} </a>
      </li>
  {{/each}}
  </ul>

'


Answer 2

在您的主 html 文件中说：main.html

<div id="myTarget"></div>

<script type="text/javascript">
$(document).ready(function(){
    
    var context = { name : "XYZ", city : "Cape town" };
        var templateScript = $('#handlebars-demo').html();
        var theTemplate = Handlebars.compile(templateScript);
        var html = theTemplate(context);
        console.log(html);
    
    $('#myTarget').append(html);
});
</script>

<script src="myscripts.js"></script>

在外部 js 文件中说：myscripts.js

<script id="handlebars-demo" type="text/x-handlebars-template" >
    <p> Hi, my name is @{{name}} and i live in @{{city}} </p>
</script>