如何在HTML頁面中正確存儲HTML模板？
[英]How can I correctly store a HTML template within a HTML page?
問題描述
我有一些小模板字符串，它們將在同一頁面上通過Mustache.js呈現。我不需要為模板創建單獨的html文件。
存儲模板的選項：
存儲在javascript變量中：破解多行字符串，大量轉義引號。
存儲為隱藏div的innerHTML。
我嘗試了方法＃2，但它似乎無法正常工作。
小提琴： http ： //jsfiddle.net/RHwnq/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模板有哪些其他好的技巧？
4 個解決方案
解決方案1
22 已采納 2012-11-28 11:46:44
我將它們存儲在腳本標記中，因此它們不會被渲染，如下所示：
<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);
解決方案2
6 2012-11-28 11:47:18
使用<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();
解決方案3
1 2017-08-17 18:17:30
根據您的IDE，您可能會或可能不會在<script></script>塊中獲得HTML語法突出顯示。 我像你一樣使用div塊，但是添加
#templates {display: none;}
到CSS。
解決方案4
0 2019-03-19 09:35:36
我使用HTML“模板”標簽。
<template id="tmp">Some HTML here</template>
看這個例子：
當用戶向下滾動時，如何使另一個 HTML 頁面出現在 HTML 頁面中？
[英]How can I make another HTML page appear within an HTML page when the User Scrolls down?
我如何包含HTML <template> 流星大火模板中的元素？
[英]How can I include an HTML <template> element within a Meteor Blaze Template?
如何防止引導程序模式中加載的html影響我的頁面html？
[英]How can I prevent the html loaded within my bootstrap modal from affecting my page html?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.