Javascript js从html文档中分离脚本标记

从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>

{{{#每个这个}


{{/每个}}

---

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

你真的应该把它们分开，有一个与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>

'

{{{#每个这个}


{{/每个}}

---

"


在主html文件中说：

main.html

$（文档）.ready（函数（）{
var context={name:“XYZ”，city:“开普敦”}；
var templateScript=$（“#车把演示”）.html（）；
var theTemplate=handlebar.compile（模板脚本）；
var html=模板（上下文）；
log（html）；
$（'#myTarget'）.append（html）；
});

在外部js文件中说：

myscripts.js

嗨，我的名字是{{name}，我住在{{city}

您可以将所有模板保存在

中。没有必要将它们嵌入身体本身。请访问pandora.com，看看它们是如何实现模板的。我想将它们保存在一个单独的文件中，以便有一个更清晰的html文档。template.js或类似的东西，但是我不能使用“.js”，因为它们不是javascript文件。您可以有一个单独的html文件，名为“Templates.html”或“ProductTemplates.html”。在这些文件中，您将拥有标准html，但其中包含脚本标记/模板。然后像加载任何外部资源一样加载这些html模板。在div中加载该模板的最佳方法是什么？使用AJAX？由于没有javascript文件，您会给文件模板提供什么文件扩展名？您不能将

放在

中，就像这样，

只允许

元素作为子元素：.html很好，如果您使用的是asp.net，则使用.cshtml。只需编写javascript，当出于任何原因（按钮单击等）需要加载此脚本时，您可以将模板传递到div中。