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>

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

2 个答案: