例如,位于Joel Spolsky's public career profile的view-source
<script type="text/html" id="stackexchangeanswerswidget">
<h3>Top Answers</h3>
<div class="answers">
</div>
</script>
<script type="text/html" id="topanswer">
<div class="top-answer">
<div class="top-answer-stats">{{= shared.htmlEncode(Score) }}</div>
<span class="top-answer-title"><a href="{{=AnswerLink}}">{{= shared.htmlEncode(Title) }}</a></span>
<a class="add-answer">add</a>
<br class="clear" />
</div>
</script>
<script type="text/html" id="answer-view">
<div class="answer">
<div class="answer-stats {{= shared.htmlEncode(Site.toLowerCase().replace(/ /g, '')) }}">
<div class="score">
<strong>{{= shared.htmlEncode(Score) }}</strong>
<div class="votecount">votes</div>
</div>
<img class="answer-logo" src="{{= shared.htmlEncode(FaviconUrl) }}" />
</div>
<div class="answer-content">
<span class="q">Q:</span>
<div class="answer-top">
<a class="answer-title" href="{{= shared.htmlEncode(AnswerLink) }}">{{= shared.htmlEncode(Title) }}</a><br />
</div>
<span class="a">A:</span><div class="answer-body">{{= Body }}</div>
<div class="more-button" style="text-align:center; clear:both; display:none;"><a class="more">More</a></div>
</div>
</div>
</script>
HTML标签如何在脚本标签内工作?和/或哪种技术用于这些html标签以及脚本标签中的模板相似代码
{{= .... }}
? 最佳答案
您可以将所需的任何内容放入<script>
标记中。如果您指定的内容类型不是Javascript(或浏览器可以理解的另一种脚本语言),浏览器将不会解释它,您可以将其作为纯文本进行访问。由于<script>
标记的内容被视为CDATA,因此不会对其内容进行解析,因此您可以在内容中存储未加引号的XML或HTML(只要您从未在内容中放置</script>
标记即可,因为那样会关闭您的元素)。
例如,它在SVG Web中使用,polyfill允许您在HTML中使用内联SVG,并在支持它的浏览器中将其转换为 native SVG,或在不支持该功能的浏览器中转换为Flash。通过将SVG封装在<script>
标记中,它可以将SVG嵌入到 native 不支持它的浏览器中,因此浏览器不会尝试将其解析为HTML。
对于SO求职者,看起来他们在<script>
标签中存储了与Backbone.js和Underscore.js一起使用的模板,因为这是在HTML中粘贴模板的方便位置。这是他们的代码片段,他们在其中抓取模板并将其提供给Underscore模板引擎:
TopAnswerView = Backbone.View.extend({
template: _.template($("#topanswer").html()),
events: {
"click .add-answer": "addAnswerToCV"
},