JavaScript Variablen über HTML Template laden

Neben Scalaren lassen sich auch komplexe Datenstrukturen als JSON einbinden

Über Platzhalter im HTML Template lassen sich natürlich nicht nur Literale dynamisch einbauen die nur für das DOM/HTML bestimmt sind sondern auch Variablen für JavaScript. Konkret werden auf dieser Demoseite zwei Variablen serverseitig erfasst und zusammen mit der Response ausgeliefert, wobei diese Variablen über entsprechende Platzhalter so in die Seite eingebaut sind, daß sie für JavaScript auch als Variablen zur Verfügung stehen.

Aus der Sicht der Templating Engine sind Platzhalter in einem Template nur Literale die beim Rendern des Templates gegen ihren dazugehörigen Wert ausgetauscht werden. So können Literale neben einfachen Scalaren (Stringvariablen) auch kompexe Daten-Strukturen beinhalten. Dafür wurde für diese Demoseite die Serverumgebung ausgewählt welche ein assoziatives Array mit Schlüssel-Werte-Paaren darstellt.

Demonstration der Benutzbarkeit dieser Variablen

Auf diese Art und Weise eingebaute Variablen sind unmittelbar in JavaScript verwendungsfähig. Sie können das testen indem Sie aus untenstehendem Dropdown einen beliebigen Schlüssel zur Serverumgebung auswählen. Der dazugehörige Wert wird Ihnen daraufhin ausgegeben.

Ansicht der per Platzhalter eingebauten Stingvariable

Im Template sieht der Platzhalter so aus: var datetime = '%datetime%'; und nach dem Rendern dann so:

var datetime = 'Sun Sep 23 15:09:32 2018';

Platzhalter im Template für den JSON

Ganz analog wird der Platzhalter für den JSON-String im Template bereitgestellt:

var umgebung = %umgebung%;

Womit auch dieses Objekt für JavaScript zur vollen Verfügung steht. Anmerkung: Die eigentlichen Platzhalter sind in dem hier eingesetztem Framework zwischen den Prozentzeichen notiert und damit auf die eingebaute Render-Engine abgestimmt. Der Vollständigkeit halber noch der serverseitige Perlcode:

Der zur Klasse hinzukonfigurierte Trait

use strict;
use warnings;
use JSON;

sub init{
    my $self = shift;

    # ein paar sicherheitsrelevante Daten löschen
    # die muß nicht jeder sehen ;)
    delete @ENV{qw(SCRIPT_NAME SCRIPT_FILENAME DOCUMENT_ROOT PATH)};

    # STASH referenziert sämtliche Daten für
    # den Renderprozess der TE
    $self->{STASH}{umgebung} = encode_json(\%ENV);
    $self->{STASH}{datetime} = localtime;
}

Anmerkung: Traits sind Sammlungen von Methoden oder Funktionen. In diesem Framework bündeln Traits Methoden des Framework-Interface die hierfür in dedizierten Dateien ausgelagert sind. Zu Klassen welche bestimmte Methoden des Framework-Interface nicht selbst implementieren, können Traits als Eigenschaft interface=foo (Beispiel) hinzukonfiguriert werden.

Achtung Kontextwechsel

So komfortabel es sein mag, Variablen über Platzhalter direkt ins DOM oder JavaScript zu pflanzen, so sind jedoch ein paar Dinge zu beachten. Spätestens wenn die Werte bzw. Daten für diese Platzhalter aus unbekannten Quellen kommen, sind spezielle Prüfungen erforderlich damit kein Schadcode eingeschleust wird. Insbesondere wenn Platzhalter innerhalb eines <script>-Elements notiert sind, wäre zu bedenken daß jeder Code nach dem Laden des Dokuments ausführbar ist und eingebaute Funktionen ebenda auch unvermittelt ausgeführt werden. Möglich ist es aber auch, Platzhalter in einem Bereich zu notieren der sich gegenüber DOM/JS neutral verhält wie das z.B. beim <template>-Element der Fall ist.


Die rein persönlichen Zwecken dienende Seite verwendet funktionsbedingt einen Session-Cookie. Datenschutzerklärung: 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. @: Rolf Rost, Am Stadtgaben 27, 55276 Oppenheim, nmq​rstx-18­@yahoo.de