Как работают теги HTML внутри тега скрипта? - PullRequest
27 голосов
/ 15 апреля 2011

Например, источник просмотра в Публичный профиль Джоэла Спольски

<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 и шаблонных кодов {{= .... }} внутри тегов сценария?

Ответы [ 2 ]

26 голосов
/ 15 апреля 2011

Вы можете поместить все, что вы хотите, в тег <script>. Если вы укажете тип содержимого, отличный от Javascript (или другого языка сценариев, который понимает браузер), он не будет интерпретироваться браузером, и вы можете просто получить к нему доступ в виде простого текста. Поскольку содержимое тегов <script> обрабатывается как CDATA, содержимое не анализируется, и вы можете хранить в содержимом XML или HTML без кавычек (при условии, что вы никогда не добавляете тег </script> в содержимое, так как закрою вашу стихию).

Это используется, например, в SVG Web , полифилле, который позволяет вам использовать встроенный SVG в HTML и конвертировать его в собственный SVG в браузерах, которые его поддерживают, или Flash в браузерах, которые не «т. Он позволяет встраивать SVG в браузеры, которые не поддерживают его изначально, заключая его в тег <script>, поэтому браузер не пытается и не может проанализировать его как HTML.

В случае SO-носителей, похоже, они хранят шаблоны для использования с тегами Backbone.js и Underscore.js в <script>, поскольку это удобное место для вставлять шаблоны в HTML. Вот фрагмент их кода, где они берут шаблон и предоставляют его движку шаблонов Underscore:

    TopAnswerView = Backbone.View.extend({
        template: _.template($("#topanswer").html()),
        events: {
            "click .add-answer": "addAnswerToCV"
        },
8 голосов
/ 15 апреля 2011

Ключ находится в атрибуте type скрипта.При установке type = "text / html" он не запускается движком JavaScript браузера.Вместо этого он используется для других вещей, таких как шаблоны.Этот пример использует эти теги для шаблонов.

Ознакомьтесь с этой веб-трансляцией MIX 2011, в которой показано, как нечто подобное используется в Knockout.js:

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

...