javascript - tipos - todas las etiquetas de html
¿Cómo funcionan las etiquetas HTML dentro de la etiqueta de script? (2)
Por ejemplo, ver-fuente en el perfil de la carrera pública de 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>
¿Cómo funcionan las etiquetas HTML dentro de la etiqueta de script? y / o ¿Qué tipo de tecnología se utiliza para esas etiquetas html y códigos de plantillas similares {{= .... }} dentro de las etiquetas de script?
La clave está en el atributo de tipo del script. Al configurarlo para que escriba = "text / html" , el motor de JavaScript del navegador no lo ejecuta. En su lugar, se utiliza para otras cosas, como las plantillas. Este ejemplo parece estar usando estas etiquetas para las plantillas.
Echa un vistazo a este webcast de MIX 2011 que muestra cómo se utiliza algo similar en Knockout.js:
Puedes poner lo que quieras en una etiqueta <script> . Si especifica un tipo de contenido que no sea Javascript (u otro lenguaje de scripting que el navegador entienda), no será interpretado por el navegador y solo puede acceder a él como texto sin formato. Dado que los contenidos de las etiquetas <script> se tratan como CDATA, los contenidos no se analizan y puede almacenar XML o HTML sin comillas en los contenidos (siempre y cuando no ponga una etiqueta </script> en los contenidos, ya que Eso cerrará tu elemento).
Esto se usa, por ejemplo, en SVG Web , un polyfill que le permite usar SVG en línea en HTML y convertirlo a SVG nativo en navegadores que lo admiten, o Flash en navegadores que no lo hacen. Permite incrustar SVG en los navegadores que no lo admiten de forma nativa envolviéndolo en una etiqueta <script> , para que el navegador no intente analizarlo como HTML.
En el caso de SO carreers, parece que almacenan plantillas para usar con Backbone.js y Underscore.js en etiquetas <script> , ya que es un lugar conveniente para pegar plantillas en HTML. Aquí hay un fragmento de su código donde toman la plantilla y la proporcionan al motor de la plantilla de subrayado:
TopAnswerView = Backbone.View.extend({
template: _.template($("#topanswer").html()),
events: {
"click .add-answer": "addAnswerToCV"
},