HTML 标签如何在脚本标签中工作？

Question

例如，查看源代码Joel Spolsky's public career profile

<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 标签和模板类似代码 {{= .... }} 在脚本标签内使用了什么样的技术？

Answer 1

您可以在<script> 标记中添加任何您想要的内容。如果您指定的内容类型不是 Javascript（或浏览器可以理解的另一种脚本语言），浏览器不会对其进行解释，您可以将其作为纯文本访问。由于 <script> 标记的内容被视为 CDATA，因此不会解析内容，您可以在内容中存储未引用的 XML 或 HTML（只要您从未在内容中放置 </script> 标记，因为将关闭您的元素）。

这用于，例如，SVG Web，这是一种 polyfill，允许您在 HTML 中使用内联 SVG，并在支持它的浏览器中将其转换为原生 SVG，或在不支持它的浏览器中转换为 Flash。它允许通过将 SVG 包装在 <script> 标记中来将 SVG 嵌入到本机不支持它的浏览器中，因此浏览器不会尝试将其解析为 HTML。

对于 SO carreers，看起来他们在 <script> 标记中存储模板以供 Backbone.js 和 Underscore.js 使用，因为这是在 HTML 中粘贴模板的方便位置。这是他们获取模板并将其提供给 Underscore 模板引擎的代码的 sn-p：

    TopAnswerView = Backbone.View.extend({
        template: _.template($("#topanswer").html()),
        events: {
            "click .add-answer": "addAnswerToCV"
        },

Answer 2

关键在于脚本的 type 属性。通过将其设置为 type="text/html" 它不会被浏览器的 JavaScript 引擎运行。相反，它用于其他事情，例如模板。此示例似乎将这些标签用于模板。

观看 MIX 2011 网络广播，它展示了如何在 Knockout.js 中使用类似的东西：

http://channel9.msdn.com/events/mix/mix11/FRM08