web-dev-qa-db-ja.com

HTMLタグはスクリプトタグ内でどのように機能しますか？

たとえば、ソースを表示 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タグに使用されているテクノロジーの種類、およびテンプレート類似コード{{= .... }}スクリプトタグの内側？

javascripthtmlscript-tag
27
YOU

<script>タグには、必要なものを何でも入れることができます。 JavaScript（またはブラウザーが理解できる別のスクリプト言語）以外のコンテンツタイプを指定すると、ブラウザーによって解釈されず、プレーンテキストとしてアクセスできます。 <script>タグのコンテンツはCDATAとして扱われるため、コンテンツは解析されず、引用符で囲まれていないXMLまたはHTMLをコンテンツに格納できます（</script>タグを内容、それはあなたの要素を閉じますので）。

これは、たとえば、 SVG Web で使用されます。これは、HTMLでインラインSVGを使用して、ブラウザーでネイティブSVGに変換できるようにするポリフィルです。それをサポートするか、サポートしていないブラウザでのFlash。 <script>タグでラップすることにより、SVGをネイティブでサポートしていないブラウザーに埋め込むことができるので、ブラウザーはHTMLとしての解析に失敗しません。

SOキャリアの場合、 Backbone.js および Underscore.js<script>タグ内。これは、HTMLでテンプレートを貼り付けるのに便利な場所であるためです。テンプレートを取得して提供するコードのスニペットを次に示しますそれをアンダースコアテンプレートエンジンに追加します。

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

キーはスクリプトのtype属性にあります。これをtype = "text/html"に設定すると、ブラウザのJavaScriptエンジンによって実行されません。代わりに、テンプレートなどの他の目的で使用されます。この例は、テンプレートにこれらのタグを使用しているようです。

Knockout.jsで同様のものがどのように使用されているかを示すこのMIX 2011 Webキャストを確認してください。

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

8
Shawn