Hallo,
Nein, aber die meines Wissens einfachste HTML-Template-Engine in JS sieht folgendermaßen aus:
- speichere Deine Templates mit Platzhaltern in
<script type="text/html"></script>
-Tags mit fester ID. Der Vorteil: Du kannst normalen HTML-Code verwenden und musst nicht Escapen oder Strings aus dem Code machen.- ersetze die Platzhalter (Hier ${bezeichner}) mit einer RegExp-replace und einem Callback, in dem Du die Ersetzungen aus dem JSON-Objekt ausliest:
function json2html(template, jsobj) {
return document.getElementById(template).innerHTML.replace(/${([^}]+)}/g,
function(full, key) { return jsobj[key] || ''; });
}
Variante:
~~~html
<div style="display:none" id="template">
<div>${name} etc.pp.</div>
<div>${other} etc.pp.</div>
</div>
mit
myTemplate = document.getElementById("template").innerHTML;
for (i in jsonobj) {
myTemplate.reaplace("${"+i+"}",jsonobj[i]);
}
~~~.
Ich find den regulären Ausdruck ja hübsch. Warum hast Du das $ am Anfang escaped? Gibt es einen Vorteil der einen oder anderen Variante, den ich jetzt noch nicht sehe? Bei der zweiten wäre der Vorteil, dass man fürs replace nicht wissen muss, wieviele Matches es gibt, oder? Weil key sich ja auf das erste Match bezieht. Also bei zwei Matches dann key2, oder?
Gruß
jobo