Templates laden

[Benjamin]

Hallo Leute,

ich bin gerade dabei, ein kleines Script für JS-Templates zu schreiben.

Ich habe dazu im HTML in einem unsichtbaren DIV folgenden Code angelegt:

  
  
<script type="text/html" id="templateInput">  
	<tr>  
		<td class="t">IItitleII</td>  
		<td class="b"><input id="IIidII" value="IIvalueII" type="text"></td>		  
	</tr>  
</script>  
  
  

Mit folgendem JS möchte ich das ganze Template dann in ein DIV mit der id inputs stecken:

		  
function inputAdd = function(inputId, inputTitle, inputValue)  
{  
codeTemp = document.getElementById('templateInput').innerHTML;  
codeTemp = codeTemp.replace( /IIidII/g, inputId );  
codeTemp = codeTemp.replace( /IItitleII/g, inputTitle );  
codeTemp = codeTemp.replace( /IIvalueII/g, inputValue );  
document.getElementById( 'inputs' ).innerHTML += codeTemp;  
}	  

Das Problem an der Sache ist, dass bei einem Aufruf der Funktion zwar alles richtig ersetzt wird, er jedoch wesentliche Teile des Templates einfach weglässt.

Die Ausgabe sieht so aus:

		Test2  
		<input id="Test1" value="Test3" type="text">		  
	  
  
	  
		Test2  
		<input id="Test1" value="Test3" type="text">		

Ich kann mir schon vorstellen, dass er das "unrichtige" HTML irgendwie automatisch aussortiert, da er mit <tr> ohne <table> nichts anfangen kann. Daher suche ich nun eine gute und schönere Lösung, mit der 1. der komplette Quellcode des Templates verwendet wird und 2. der "unrichtige" HTML-Code nicht unbedingt im Quellcode auftauchen muss (Auslagern in das JS File?).

Ich würde mich sehr über Hilfe freuen,
beste Grüße, der Benjamin!

[JürgenB]

Hallo Benjamin,

<script type="text/html" id="templateInput">
<tr>
<td class="t">IItitleII</td>
<td class="b"><input id="IIidII" value="IIvalueII" type="text"></td>
</tr>
</script>

  
das ist weder HTML noch Javascript. So geht das nicht. Wenn du HTML-Elemente per Javascript erzeugen möchtest, geht das entweder mit document.createElement oder, wie du es schon machst, mit innerHTML. Um bei deinem Beispiel zu bleiben würde ich das "HTML-Template" einfach in einem String abspeichern:  
  
`var codeTemp = "<p>IItitleII<\/p><p><input id='IIidII' value='IIvalueII' type='text'><\/p>";`{:.language-javascript}  
  
oder, um auf das Replace zu verzichten:  
  
~~~javascript
var Titel = "...";  
var ID = "...";  
var Wert = "...";  
var codeTemp = "<p>"+Titel+"<\/p><p><input id='"+ID+"' value='"+Wert+"' type='text'><\/p>";

(ungetestet)

Gruß, Jürgen

[Benjamin]

das ist weder HTML noch Javascript. So geht das nicht. Wenn du HTML-Elemente per Javascript erzeugen möchtest, geht das entweder mit document.createElement oder, wie du es schon machst, mit innerHTML. Um bei deinem Beispiel zu bleiben würde ich das "HTML-Template" einfach in einem String abspeichern:

var codeTemp = "<p>IItitleII<\/p><p><input id='IIidII' value='IIvalueII' type='text'><\/p>";

Vielen Dank schonmal! Ich habe ebenfalls bereits daran gedacht, alles in einen String zu speichern, jedoch sind die Templates teilweise etwas größer, weswegen die Schreibweise mir einfach nicht zusagt. Bei diesem Beispiel ist es noch einigermaßen übersichtlich, alles in eine Zeile in einen String zu schreiben, aber wenn die Templates mehr Zeilen besitzen, erscheint mir das arg unübersichtlich. Daher wollte ich mir quasi ein "HTML-Container" schaffen, indem der ganze Kram so stehen kann wie er auch im HTML stehen soll.

[JürgenB]

Hallo Benjamin,

... Daher wollte ich mir quasi ein "HTML-Container" schaffen, indem der ganze Kram so stehen kann wie er auch im HTML stehen soll.

dann nimm doch auch einen, z.B. ein unsichtbares DIV. Evtl. kannst du dann auch cloneNode und appendChild benutzen.

Gruß, Jürgen

[Benjamin]

Erst hatte ich auch ein unsichtbares DIV - daran liegt es daher denke ich nicht. Aber ich werde mir mal eine Methode mit cloneNode und appendChild schreiben. Vielleicht ist der Effekt dann ein anderer, wie wenn ich lediglich innerHTML benutze um das ganze umzuschreiben.

Dankesehr! Wenn es sonst noch Ideen gibt - ich bin für alles offen! :)

[Benjamin]

Folgende Funktion habe ich nun umgesetzt. Dennoch ist der Fehler der gleiche. Wieso beachtet er das tr und td nicht?

  
this.addTemplate = function( inputId, inputTitle, inputValue)  
{  
var templateChild = document.getElementById( 'templateId' ).firstChild;  
while ( templateChild != null )  
{  
document.getElementById( 'inputs' ).appendChild ( templateChild.cloneNode(true) );  
			  
templateChild = templateChild.nextSibling;  
}  

[JürgenB]

Hallo Benjamin,

Folgende Funktion habe ich nun umgesetzt. Dennoch ist der Fehler der gleiche. Wieso beachtet er das tr und td nicht?

keine Ahnung. Hast du denn inzwischen ein table? Du weißt, dass die tr nicht Kinder des table sondern des tbody sind? Wie sieht der restliche Code denn aus?

document.getElementById( 'inputs' ).appendChild ( templateChild.cloneNode(true) );

hier solltest du wenigstens die id des Clones anpassen.

templateChild = templateChild.nextSibling;

nextSibling ist kritisch, da für einige Browser Leerzeichen und Umbrüche auch Knoten sind, für andere nicht.

Warum legst du nicht das ganze Template in ein entsprechendes Element und clonst dieses dann?

Gruß, Jürgen

[Patrick Andrieu]

Hallo Benjamin!

this.addTemplate = function( inputId, inputTitle, inputValue)
{
var templateChild = document.getElementById( 'templateId' ).firstChild;
while ( templateChild != null )
{
document.getElementById( 'inputs' ).appendChild ( templateChild.cloneNode(true) );

templateChild = templateChild.nextSibling;
}

  
Einrückungen stünden Deinem Programmcode ganz gut. Auf den ersten Blick fehlt eine geschweifte Klammer (oder liegt's an meinen schlechten Augen und an Courier New - weswegen ich daheim im Editor lieber Consolas verwende, eine diktengleiche schrift ohne Serifen und mit richtig geilen, runden Klammern, so dass man sie nicht mit den geschweiften verwechselt?)  
  
		  
Viele Grüße aus Frankfurt/Main,  
Patrick

-- 
\_ - jenseits vom delirium - \_  
![](http://www.atomic-eggs.com/fuernA.jpg)  
   [Diblom](http://www.atomic-eggs.com/pics/diblom.png)   [[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash](http://www.atomic-eggs.com/)]  
Achtung [Agentur](http://www.atomic-eggs.com/cwi/cwi_5.shtml#a5)! | Nichts ist unmöglich? [Doch!](http://www.atomic-eggs.com/cwi/cwi_4.shtml) | [Heute](http://www.atomic-eggs.com/cgi-bin/date_today.pl) schon ge[gök](http://goek.atomic-eggs.com/goek_goek.html)t?

[Patrick Andrieu]

Re!

Consolas, (...), eine diktengleiche schrift ohne Serifen und mit richtig geilen, runden Klammern, so dass man sie nicht mit den geschweiften verwechselt, falls es jemanden noch interessiert ;)

Viele Grüße aus Frankfurt/Main,
Patrick