HTML 标签如何在 script 标签内工作？

发布于 2024-11-01 19:00:11 字数 1912 浏览 3 评论 0原文

<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 标签如何在 script 标签内工作？和/或这些 html 标签和脚本标签内的类似模板代码 {{= .... }} 使用了哪种技术？

原文

For example, view-source at 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>

How does HTML tags work inside script tag? and/or What kind of technology used for those html tags, and template alike codes {{= .... }} inside script tags?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

ま柒月 2024-11-08 19:00:11

您可以将任何您想要的内容放入标记，因为这将关闭您的元素）。

例如，它在 SVG Web 中使用，这是一个允许您使用内联 SVG 的填充程序HTML 格式，并在支持它的浏览器中将其转换为原生 SVG，或者在不支持它的浏览器中将其转换为 Flash。它允许通过将 SVG 包装在

对于 SO 职业者来说，他们似乎存储了与 Backbone.js 和 Underscore.js 位于

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

You can put anything that you want in a <script> tag. If you specify a content type other than Javascript (or another scripting language that the browser understands), it will not be interpreted by the browser, and you can just access it as plain text. Since the contents of <script> tags are treated as CDATA, the contents are not parsed and you can store unquoted XML or HTML in the contents (as long as you don't ever put a </script> tag in the contents, since that will close your element).

This is used, for example, in SVG Web, a polyfill that allows you to use inline SVG in HTML and have that converted to native SVG in browsers that support it, or Flash in browsers that don't. It allows embedding of SVG in browsers that don't support it natively by wrapping it in a <script> tag, so the browser doesn't try and fail to parse it as HTML.

In the case of SO carreers, it looks like they storing templates for use with Backbone.js and Underscore.js in <script> tags, since that's a convenient place to stick templates in HTML. Here's a snippet of their code where they grab the template and provide it to the Underscore template engine:

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

回复收藏 0 原文