¿Cómo puedo usar el marcado DOM literal como plantilla de prototipo?

Question

La clase Plantilla de Prototype le permite sustituir fácilmente los valores en una plantilla de cadena. En lugar de declarar la cadena de origen de la Plantilla en mi código, quiero extraer la cadena de origen del DOM.

Por ejemplo, en mi marcado tengo un elemento:

<div id="template1">
  <img src="#{src}" title="#{title}" />
</div>

Quiero crear la plantilla con el contenido interno del elemento div, así que he intentado algo como esto:

var template = new Template($('template1').innerHTML);

El problema es que la representación de Internet Explorer del innerHTML omite las comillas alrededor del valor del atributo cuando el valor no tiene espacios. También intenté usar Element # inspect , pero en Internet Explorer obtengo una representación no recursiva del elemento / subárbol.

¿Hay otra forma de obtener una representación amigable con la plantilla del contenido del subárbol?

Answer 1

Resig al rescate:

  

También puede incluir un script en línea:

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

     

Consejo rápido: incrustando scripts en tu   página que tiene un tipo de contenido desconocido   (tal es el caso aquí - el navegador   no sabe cómo ejecutar un   texto / script html) simplemente se ignoran   por el navegador y por los motores de búsqueda   y lectores de pantalla. Es perfecto   dispositivo de camuflaje para plantillas furtivas   en tu página. Me gusta usar esto   técnica para casos rápidos y sucios   donde solo necesito una pequeña plantilla o   dos en la página y quieres algo   ligero y rápido.

     

y lo usarías desde un script como   entonces:

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

Answer 2

Parece que puede incrustar la fuente de la plantilla dentro de una etiqueta textarea en lugar de una div y recuperarla usando Elemento # valor .

Ciertamente hace que el marcado sea un poco extraño, pero aún parece razonablemente amigable para los diseñadores.

Además, como Jason señaló en un comentario a la pregunta original, incluir la etiqueta img en el área de texto evita una solicitud falsa de una imagen no válida.