Manch Template-System einer Website gleicht einer Matroschka - aber schlecht ist das nicht. Im Gegenteil. Das kann sehr nützlich sein. Möchte man das Prinzip auf eine Javascript-App anwenden, muss man an einigen Stellen umdenken.
Schritt 1, das Template als String holen
im Ordner der Templates möchte man die Datei template.jhtm als String holen
var Req = {
fileRequest : 'null',
readFile : function(file){
Req.fileRequest = new Ajax.Request(file,{
asynchronous : false // important
});
return Req.fileRequest.transport.responseText;
}
}
Aufgerufen wird das dann so:
var string = Req.readFile('path/to/file.jhtml');
Dabei handelt es sich um einen Prototype XHR. Wichtig ist, dass der Request synchron ist. D.h. diese Funktion gibt erst was zurück, wenn sie fertig ist. readFile() wartet also mit dem Return, bis die Datei geladen wurde. Nachteil: die ganze App steht einen Augenblick.
Schritt 2, Platzhalter im String ersetzen
die template.jhtml kann und soll ja mehrfach verwendet werden. Demnach wäre es sinnvoll, wenn an den Stellen es Inhaltes Platzhalter sind, die dann später ausgetauscht werden. Ich empfehle auffällige Terminatoren für den Platzhalter. In diesem Falle %%platzhalter%%
Beispiel:
<div>
<p>%%vorname%%</p>
</div>
Einfaches Beispiel, Platzhalter austauschen:
var name = 'Hans Peter';
var html = string.replace(/%%vorname%%/g,name);
Beispiel mit for-in-Schleife:
Link zu dieser Seite:
http://www.seekwhencer.de/de/blog/coding/template-call-in-javascript-air-apps