如何在HTML頁面中正確存儲HTML模板？

我有一些小模板字符串，它們將通過Mustache.js在同一頁面上呈現。我無需爲模板創建單獨的html文件。用於存儲模板如何在HTML頁面中正確存儲HTML模板？

選項：

在JavaScript變量存儲：hackish的多串，很多引號逃逸的。
存儲爲隱藏div的innerHTML。

我試過方法＃2，但它似乎沒有正常工作。

<html> 
<head></head> 
<body> 
<div id='templates' class='hide' align=""> 
     <div id='tableTemplate'> 
      <table class="table"> 
       {{#name_list}} 
        <tr><td> {{name}} </td></tr> 
       {{/name_list}} 
      </table> 
     </div> 
</div> 

<script> 
var template = $('#tableTemplate').html(); 
console.log(template); 
</script> 

</body> 
</html>

此日誌：

{{#name_list}} 
    {{name}} 
{{/name_list}} 
<table class="table"><tbody><tr><td></td></tr></tbody></table>

相反的：

<table class="table"> 
        {{#name_list}} 
         <tr><td> {{name}} </td></tr> 
        {{/name_list}} 
    </table>

這可能是由於瀏覽器的一些標記修正。什麼是在HTML頁面中存儲HTML模板的其他好技巧？

來源

2012-11-28 DhruvPathak

如何不將它們存儲在同一個文件中，但通過AJAX加載它們？ – feeela

@feeela不，我不想讓ajax調用加載2-3個小字符串，我打算將它們存儲在同一頁中。 – DhruvPathak

在與backbone.js/underscore.js相關的一些教程中，他們將模板存儲在標記中。仔細看看這個問題：http://stackoverflow.com/questions/4912586/explanation-of-script-type-text-template-script – Marc

我把它們存儲在一個腳本標籤，所以他們沒有得到呈現，就像這樣：

<script id="abc-template" type="text/html"> 
    <h1>{{name}}</h1> 
</script>

然後，您可以參考它們是這樣的：

var template = $('#abc-template').html(); 
var html = Mustache.to_html(template, data); 
$('#abc-div').html(html);

來源

2012-11-28 11:46:44

哈，相同的解決方案在幾秒鐘內:) –

FML救了我一個一整天。 – Worthy7

使用<script>標籤的偉大工程對於此：

<script id="tableTemplate" type="text/html"> 
    <table class="table"> 
    {{#name_list}} 
    <tr><td> {{name}} </td></tr> 
    {{/name_list}} 
    </table> 
</script>

它實際上是一個直接替換，它將與您的var template = $('#tableTemplate').html();

來源

2012-11-28 11:47:18

根據您的IDE，您可能會或可能不會在<script></script>塊中獲得HTML語法高亮顯示。我使用的是div塊，但添加了

#templates {display: none;}

到CSS。

來源

2017-08-17 18:17:30 abalter

如何在HTML頁面中正確存儲HTML模板？

回答

相關問題