Как HTML-теги внутри тега script?
например, view-source at профиль публичной карьеры Джоэла Спольски
<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-тегов и шаблонов, похожих на коды {{= .... }}
внутри тегов сценария?
2 ответов
вы можете поместить все, что вы хотите в <script>
тег. Если вы укажете тип контента, отличный от Javascript (или другого языка сценариев, который понимает браузер), он не будет интерпретироваться браузером, и вы можете просто получить к нему доступ как к обычному тексту. Так как содержание <script>
теги обрабатываются как CDATA, содержимое не анализируется, и вы можете хранить в содержимом без кавычек XML или HTML (если вы никогда не ставите </script>
тег в содержимом, так как это закроет ваш элемент.)
это используется, например, в SVG Web, polyfill, который позволяет использовать встроенный SVG в HTML и преобразовать его в собственный SVG в браузерах, которые его поддерживают, или Flash в браузерах, которые этого не делают. Он позволяет встраивать SVG в браузеры, которые не поддерживают его изначально, обертывая его в <script>
тег, поэтому браузер не пытается разобрать его как HTML.
в случае so carreers, похоже, что они хранят шаблоны для использования с костяк.js и подчеркивания.js на <script>
теги, так как это удобное место для вставки шаблонов в HTML. Вот фрагмент их кода, где они захватывают шаблон и предоставляют его движку шаблонов подчеркивания:
TopAnswerView = Backbone.View.extend({
template: _.template($("#topanswer").html()),
events: {
"click .add-answer": "addAnswerToCV"
},
ключ находится в скрипта тип. Установив его в type= "text / html" он не запускается движком JavaScript браузера. Вместо этого он используется для других вещей, таких как шаблоны. В этом примере эти теги используются для шаблонов.
проверьте этот микс 2011 веб-трансляция, которая показывает, как что-то подобное используется в нокауте.js: