HTML标记如何在脚本标记内工作？

Question

例如,Joel Spolsky的公共职业生涯中的观点来源

<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>标记中,因此浏览器不会尝试将其解析为HTML.

在SO carreers的情况下,它看起来像他们存储的模板与使用Backbone.js的和Underscore.js的<script>标签,因为这是一个方便的地方贴模板HTML.这是他们的代码片段,他们抓住模板并将其提供给Underscore模板引擎:

    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