Comment utiliser le marquage DOM littéral comme modèle de prototype?

Question

La classe Template de Prototype vous permet de substituer facilement des valeurs dans un modèle de chaîne. Au lieu de déclarer la chaîne source Modèle dans mon code, je veux extraire la chaîne source du DOM.

Par exemple, dans mon balisage j'ai un élément:

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

Je veux créer le modèle avec le contenu de l'élément div, donc j'ai essayé quelque chose comme ceci:

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

Le problème est que la représentation d'innerHTML par Internet Explorer omet les guillemets autour de la valeur de l'attribut lorsque la valeur n'a pas d'espaces. J'ai également essayé d'utiliser Element#inspect, mais dans Internet Explorer, je récupère une représentation non récursive de l'élément/sous-arbre.

Existe-t-il une autre façon d'obtenir une représentation conviviale du contenu du sous-arbre?

Answer 1

Resig to the rescue:

Vous pouvez créer un script aussi en ligne:

<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> 

Conseil: Intégration des scripts dans votre page qui ont un inconnu de type de contenu (tel est le cas ici - le navigateur ne sait pas comment exécuter un script texte/html) sont simplement ignorés par le navigateur - et par les moteurs de recherche et lecteurs d'écran. C'est un parfait appareil de camouflage pour se faufiler des modèles dans votre page. J'aime utiliser cette technique pour les cas rapides et sales où j'ai juste besoin d'un petit modèle ou deux sur la page et je veux quelque chose léger et rapide.

et vous l'utiliser à partir du script comme si :

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

Answer 2

On dirait que vous pouvez intégrer la source du modèle à l'intérieur d'une balise textarea au lieu d'une div et l'extraire en utilisant Element#value.

Certes, le balisage est un peu bizarre, mais il semble toujours raisonnablement amical pour les concepteurs. De plus, comme Jason l'a souligné dans un commentaire à la question d'origine, y compris la balise img dans la zone de texte empêche une fausse demande pour une image invalide.