Templates vereinfachen Abläufe zum Darstellen von Daten im Browser, z.B. das Ausfüllen von Formularen und Tabellen.
Das Fehlen einer geeigneten Template-Engine in Perl war viele Jahre eine Hürde zur Entwicklung komplexer Webanwendungen bzw. Frameworks. Von daher gingen einige Entwickler daran, proprietäre Templating-Engines (TE) zu entwickeln und so habe auch ich für mein Framework eine einfache TE entwickelt, die allen Anforderungen gerecht wird und auch performant arbeitet.
Die hier vorgestellte TE für JavaScript ist genauso aufgebaut wie ihr Perl-Äquivalent und gründet sich von daher auf viele Jahre Erfahrung mit der Perl-TE. Wesentlicher Bestandteil dieser Erfahrung sind die Anforderungen an eine TE sowie die Erkenntnis, dass es eben nicht die Aufgabe einer TE ist, komplex logische Vorgänge in einem Template abzubilden: Die Geschäftslogik ist und bleibt Sache des Progamm's.
Das Template sollte aus verschiedenen Quellen kommen dürfen, beispielsweise sind im HTML-Quelltext ganz normale Abschnitte als Template ausgezeichnet und werden dann mit Platzhaltern gerendert. Eine solche Auszeichnung sieht für eine Tabelle beispielsweise so aus:
<tbody>
<!--loop_files-->
<tr>
<td>@name@</td>
<td>@size@</td>
<td>@if_type@ @type@ @else@ application/octet-stream @endif@</td>
</tr>
<!--endloop-->
</tbody>
Mit dem Ziel, über eine Liste/Array mit Platzhaltern diese Tabelle mehrzeilig zu befüllen. Das Template zeigt die Funktionsweise, dem entsprechend sieht die Liste mit den Platzhaltern so aus:
files: [
{
name: 'red.gif',
size: '522',
type: 'image/jpeg'
},
{
name: 'blue.png',
size: '51346',
type: 'image/png'
},
{} /* usw. */
];
Mit dem Platzhalter loop_files wird über den Schlüsselname files dieses Array identifiziert und beim Rendern von der TE so abgearbeitet, dass Platzhalter wie @name@, @size@, @type@ usw. durch die entsprechenden Werte ersetzt werden. Innerhalb von diesem Schleifendurchlauf ist, wie das Beispiel zeigt, eine if/else/endif Kontrollstruktur möglich, die auch außerhalb einer Schleife notiert sein kann:
@if_klaro@
<p>Ja, alles klar.../p>
@else@
<p>Das ist noch nicht entschieden.../p>
@endif@
Wobei der zugehörige STASH (Datenversteck) so aussieht: {klaro:true} oder {klaro:false}, je nachdem.
Einfache Platzhalter schließlich, sind genauso einfach mit dem Klammeraffen als Begrenzer notiert:
<form id="addr">
<fieldset><legend><strong><label for="name">Name:</label></strong></legend>
<input name="name" id="name" value="@name@" />
</fieldset>
<fieldset><legend><strong><label for="vname">Vorname</label></strong></legend>
<input name="vname" id="vname" value="@vname@" />
</fieldset>
</form>
Und passend hierzu der STAH = {name: 'Otto', vname: 'Hans'}; hier noch einmal alles zusammen:
/* Nutze JQuery */
var tmpl = $('#addr').html();
var rendered = xr(tmpl, {name: 'Otto', vname: 'Hans'});
$('#addr').html(rendered);
Ggf. ergeben Platzhalter in HTML-Templates ein nicht valides HTML wie z.B. <input type="range" value="@range@" /> (@range@ ist nicht numerisch); das Template sollte dann in einem Bereich notiert sein, den der Browser ignoriert -- und das wäre ein <script>-Bereich:
<script id="template" type="text/plain">
Hier kann alles notiert sein,
was zum Template gehört, mehrzeilig,
html, texte, Platzhalter...
</script>
<script>
// fetch template using jquery
var template = $('#template').html();
</script>
Die aktuelle Version der Funktion xr() ist hier.
Mehrere, durch Leerzeichen getrennte Namen in untenstehenden Formular ergeben eine Liste.
Datenschutzerklärung: Diese Seite dient rein privaten Zwecken. Auf den für diese Domäne installierten Seiten werden grundsätzlich keine personenbezogenen Daten erhoben. Das Loggen der Zugriffe mit Ihrer Remote Adresse erfolgt beim Provider soweit das technisch erforderlich ist. sos@rolfrost.de.