¿Cómo funcionan las etiquetas HTML dentro de la etiqueta de script?

Question

Por ejemplo, ver el código fuente en 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> 

¿Cómo funcionan las etiquetas HTML dentro de etiqueta de script? y/o ¿Qué tipo de tecnología se usa para esas etiquetas html, y códigos de plantilla similares {{= .... }} dentro de las etiquetas de scripts?

Answer 1

Usted puede poner cualquier cosa que desee en una etiqueta <script>. Si especifica un tipo de contenido distinto de Javascript (u otro lenguaje de scripting que comprenda el navegador), el navegador no lo interpretará y 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 que no coloque una etiqueta </script> en los contenidos, ya que eso cerrará su elemento)

Esto se utiliza, por ejemplo, en SVG Web, un polyfill que le permite usar SVG en línea en HTML y convertirlo a SVG nativo en buscadores que lo admitan, o Flash en navegadores que no lo hacen. Permite la incrustación de SVG en los navegadores que no lo admiten de forma nativa envolviéndolo en una etiqueta <script>, por lo que el navegador no intenta y no puede analizarlo como HTML.

En el caso de las carreras universitarias, parece que el almacenamiento de plantillas para su uso con Backbone.js y Underscore.js en <script> etiquetas, ya que es un lugar conveniente para pegar las plantillas en HTML. He aquí un fragmento de su código donde agarran la plantilla y proporcionar al motor de plantillas Subrayado:

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

Answer 2

La clave está en el atributo del script. Al establecerlo en type = "text/html" no se ejecuta con el motor de JavaScript del navegador. En cambio, se usa para otras cosas, como la creación de plantillas. Este ejemplo parece estar usando estas etiquetas para plantillas.

Control hacia fuera este MIX 2011 por Internet que muestra cómo se utiliza algo similar en Knockout.js:

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