Hallo,
bei der Untersuchung meines chart-Problems bin ich auf das Thema template gestossen. Da meine TCs und DNs pro Zimmer jeweils in einer Datei definiert sind ist es naheliegend dies nur noch mit einer Datei und unterschiedlichen Parametern zu realisieren. Und schon habe ich mir die nächste Baustelle aufgemacht :-|
Die Datei in der alle EG Zimmer eingebunden werden ist wie folgt:
<html>
<head>
<title>EG Heizung</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu-main.html"></li>
<li data-row="6" data-col="1" data-sizex="1" data-sizey="1.5" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
<li data-row="2" data-col="2" data-sizex="2" data-sizey="3"
data-template="templates/h-r-template-hz.html"
data-parameter='{"par01":"Büro","par02":"Buero"}'>
</li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="3"
data-template="templates/h-r-template-hz.html"
data-parameter='{"par01":"Küche","par02":"Kueche"}'>
</li>
<li data-row="2" data-col="2" data-sizex="2" data-sizey="3"
data-template="templates/h-r-template-hz.html"
data-parameter='{"par01":"Esszimmer","par02":"Esszimmer"}'>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="3" data-template="h-eg-r-wohnzimmer-hz.html"></li>
<li data-row="5" data-col="2" data-sizex="2" data-sizey="2" data-template="h-eg-r-gaestetoilette-hz.html"></li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="2" data-template="h-eg-r-dielewindfang-hz.html"></li>
</ul>
</div>
</body>
</html>
Und hier das Template:
<html>
<body>
<header><font size="+1">par01</font></header>
<div class="container">
<div class="cell big">
<div class="inline"
data-type="label"
data-device="par02_TC" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
<div class="inline"
data-type="label"
data-device="par02_TC" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="cell" data-type="label">Heizkörper</div>
<div class="cell">
<table><tr><td>
<div class="inline"
data-type="thermostat"
data-device="par02_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="100px"
data-width="100px">
</div>
</td><td>
<div class="cell inline small">
<div data-type="multistatebutton"
data-device="par02_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["grey","grey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="par02_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["grey","grey"]'
>
</div>
</div>
</td></tr></table>
</div>
<div class="cell" data-type="label">Fussboden</div>
<div class="cell">
<table><tr><td>
<div class="inline"
data-type="thermostat"
data-device="par02_TC" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="actuator"
data-min="0" data-max="30" data-step="0.5"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="100px"
data-width="100px">
</div>
</td><td>
<div class="cell inline small">
<div data-type="multistatebutton"
data-device="par02_TC_Climate" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-color="dimgrey"
>
</div><br>
<div data-type="multistatebutton"
data-device="par02_TC" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-color="dimgrey"
>
</div>
</div>
</td></tr></table>
</div>
</div>
</body>
</html>
Der screenshot zeigt das Ergebnis. Der erste Raum wird sauber angezeigt. Die beiden folgenden nicht mehr. Der Rest enspricht noch der ursprünglichen Definition.
Irgendwelche Ideen, Kommentare?
Danke und ciao
Walter
welcher screenshoot?
irgendwie auf dem Weg von der harddisk zum forum verlorengegangen ;-)
Schein an Chrome auf iMac zu liegen. Mein Chrome auf iPad und Safari auf iMac zeigen es richtig an. Ich dann mal auf Suche.
Hallo Walter,
da gab es schon mal einen Ansatz, den ich auch nutze.
Siehe:
http://forum.fhem.de/index.php/topic,34233.msg313543.html#msg313543
Hallo eki,
Danke für den Hinweis und vor allem für Deine Mitarbeit hier. Habe mir das mal kurz angesehen. Das sprengt gerade mein Wissen (ich bin keine js/dss/was auch immer Du hier brauchst Guru). Werde mir das mal über Weihnachten ansehen, solange es sich mit der Familienstimmung integrieren läßt (Sitz Du schon wieder am Rechner!!!)
Jedenfalls funktioniert es am Tablet und das ist gut so, dafür ist es auch gedacht :-)
ciao Walter
Hallo Eki,
je mehr Zimmer ich auf template umstelle desto mehr Darstellungsfehler bekomme ich. Nun ist alles auf template umgestellt und bei refresh oder Seitenwechsel ergibt sich nicht einmal eine erfolgreich Darstellung der jeweiligen Seite.
Wie ist das bei Dir? Verbessert der von Dir genannte Ansatz die Situation?
Danke und ciao Walter
Hallo Walter,
Das funktioniert eigentlich recht zuverlässig. Es kommt zwar ab und zu mal vor, dass es Timeouts gibt aber dann hilft in der Regel ein Reload der Seite. Ich habe vor einiger Zeit mal mit den Einstellungen, die im fhem-tablet-ui.js bei den ajax get Aufrufen gesetzt sind (z.B. dem timeout) herumgespielt, das könnte eventuell etwas bringen.
Hallo,
nachdem ich den Grund beheben konnte warum meine FT-UI keine einzige Seite mehr vernünftig anzeigte, habe ich meine original FT-UI (ohne Templates) am Beispiel der Demo-Widgets-Seite 'bereinigt'. Der Aufbau neuer Seiten als auch das Refresh funktionieren fast 100%ig.
Also habe ich alles was unter tablet ist nach tablet_iPad kopiert und einen entsprechenden HTTPSRV definiert.
Die Struktur der Dateien ist wie folgt:
- index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="widget_base_width" content="100">
<meta name="widget_base_height" content="120">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="gridster_disable" content="0"> <!-- verschieben abschalten -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css"/>
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- define your personal style here, it wont be overwritten -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- Javascript -->
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu-main.html"></li>
<li data-row="5" data-col="1" data-sizex="1" data-sizey="0.5" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
</ul>
</div>
</body>
</html>
- menu-main.html
<!DOCTYPE html>
<html>
<head>
<title>Main Menu</title>
</head>
<body>
<header class="top-space"><font size="+1">MENU</font></header>
<div class="container">
<div class="cell"
data-type="pagetab"
data-url="main.html"
data-icon="fa-home"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-og-r.html"
data-icon="oa-control_building_og"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-eg-r.html"
data-icon="oa-control_building_eg"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-kg-r.html"
data-icon="oa-control_building_kg"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="h-dv-versorgung.html"
data-icon="oa-time_statistic"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="g-bewaesserung.html"
data-icon="oa-sani_irrigation"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
<div class="cell"
data-type="pagetab"
data-url="w-ingolstadt.html"
data-icon="oa-scene_day"
data-background-icon="fa-circle"
data-off-background-color="dimgrey"
data-on-background-color="darkorange"
data-on-color="black"
data-off-color="black">
</div>
</div>
</body>
</html>
- menu-datetime.html
<!DOCTYPE html>
<html>
<head>
<title>Main Menu Date & Time</title>
</head>
<body>
<header></header>
<div class="container">
<div class="cell large"
data-type="clock" data-format="H:i:s">
</div>
<div class="cell"
data-type="clock" data-format="l">
</div>
<div class="cell"
data-type="clock" data-format="d.m.Y">
</div>
</div>
</body>
</html>
- h-eg-r.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="widget_base_width" content="100">
<meta name="widget_base_height" content="120">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
<meta name="gridster_disable" content="0"> <!-- verschieben abschalten -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css"/>
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<!-- define your personal style here, it wont be overwritten -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- Javascript -->
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<title>EG Heizung</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menu -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu-main.html"></li>
<li data-row="6" data-col="1" data-sizex="1" data-sizey="1.5" data-template="menu-datetime.html"></li>
</div>
<!-- Content -->
<li data-row="2" data-col="2" data-sizex="2" data-sizey="3"
data-template="/fhem/tablet_Templates/h-hz-template_HK&FH.html"
data-parameter='{"par01":"Büro","par02":"Buero"}'>
</li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="3"
data-template="/fhem/tablet_Templates/h-hz-template_HK&FH.html"
data-parameter='{"par01":"Küche","par02":"Kueche"}'>
</li>
<li data-row="2" data-col="6" data-sizex="2" data-sizey="3"
data-template="/fhem/tablet_Templates/h-hz-template_HK&FH.html"
data-parameter='{"par01":"Esszimmer","par02":"Esszimmer"}'>
</li>
<li data-row="2" data-col="8" data-sizex="2" data-sizey="3"
data-template="/fhem/tablet_Templates/h-hz-template_HK&FH.html"
data-parameter='{"par01":"Wohnzimmer","par02":"Wohnzimmer"}'>
</li>
<li data-row="5" data-col="2" data-sizex="2" data-sizey="2"
data-template="/fhem/tablet_Templates/h-hz-template_FH.html"
data-parameter='{"par01":"Gästetoilette","par02":"GaesteToilette"}'>
</li>
<li data-row="5" data-col="4" data-sizex="2" data-sizey="2"
data-template="/fhem/tablet_Templates/h-hz-template_FH.html"
data-parameter='{"par01":"Diele & Windfang","par02":"DieleWindfang"}'>
</li>
</ul>
</div>
</body>
</html>
Die Template-Dateien für die Thermostatdarstellung befindet sich im ../tablet_Templates Verzeichnis.
- h-hz-template_HK&FH.html
<!DOCTYPE html>
<html>
<body>
<header><font size="+1">par01</font></header>
</div>
<div class="container">
<div class="container row big top-space">
<div class="col-1-2 left">
<div data-type="label"
data-device="par02_TC" data-get="measured-temp" data-unit="%B0C%0A" data-fix="1"
data-limits='[-20,20,24]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
<div class="col-1-2 right">
<div data-type="label"
data-device="par02_TC" data-get="humidity" data-unit="%%0A" data-fix="1"
data-limits='[0,40,60]' data-colors='["skyblue","darkorange","orangered"]'>
</div>
</div>
</div>
<div class="container row">
<div class="top-space" data-type="label">Heizkörper</div>
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat"
data-device="par02_HK_Clima" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="ValvePosition"
data-min="0" data-max="30" data-step="0.5"
data-mode="controlMode"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="96px"
data-width="96px">
</div>
</div>
<div class="col-1-3 top-space right"><font size="-2">
<div data-type="multistatebutton"
data-device="par02_HK_Clima" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="par02_HK" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
</font>
</div>
</div>
</div>
<div class="container row">
<div data-type="label">Fussboden</div>
<div class="container top-space">
<div class="col-2-3 left">
<div data-type="thermostat"
data-device="par02_TC" data-get="desired-temp" data-set="desired-temp" data-temp="measured-temp" data-valve="actuator"
data-min="0" data-max="30" data-step="0.5"
data-mode="controlMode"
data-off="controlManu off" data-boost="controlMode boost"
data-fgColor="darkorange"
data-height="96px"
data-width="96px">
</div>
</div>
<div class="col-1-3 top-space right"><font size="-2">
<div data-type="multistatebutton"
data-device="par02_TC_Climate" data-get="controlMode" data-get-on='["auto","manual"]'
data-set='["controlMode manual","controlMode auto"]' data-icons='["oa-sani_heating_automatic","oa-sani_heating_manual"]' data-colors='["darkgreen","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div><br>
<div data-type="multistatebutton"
data-device="par02_TC" data-get="R-btnLock" data-get-on='["on","off"]'
data-set='["regSet btnLock off","regSet btnLock on"]' data-icons='["oa-secur_locked","oa-secur_open"]' data-colors='["darkred","darkblue"]'
data-background-icon="fa-square" data-background-colors='["dimgrey","dimgrey"]'
>
</div>
</font>
</div>
</div>
</div>
</div>
</body>
</html>
Der erste screenshot zeigt die Darstellung mit dem 'traditionellen' Code (ohne Templates, jedes Zimmer hat eine Datei mit den Thermostatdefinitionen).
Die Code-Version mit Templates wechselt meist zwischen den beiden weitern screenshots.
Vielleicht hat jemand von Euch bei der Durchsicht des Codes die ein oder andere Idee. Auch Vorschläge im Sinne von 'best practice' sind willkommen.
Danke und ciao
walter
Hallo Walter,
bin eher zufällig auf Deinen Beitrag gestoßen, danke das Du das hier teil´st !, bin ganz am Anfang und auch der Suche nach guten Lösungen.
Wollte heute eigentlich mal nix machen, aber das reizt mich dann doch ... also ist der Abend gerettet ;)
Gruss & Danke
klaus
PS: gern auch weitere andere Beispiele !
Hallo Klaus,
das mit dem Teilen im entsprechenden Thread wahr auch geplant, aber es kam immer was dazwischen was nicht funktionierte.
Und da ich kein Experte in HTML/CSS/etc bin und alles im 'trail'n error' Modus zusammengebaut wurde, war ich mir nie sicher wie sinnvoll meine Konstrukte sind.
Die Informationen habe ich hier eingestellt, da die template-Variante nicht so funktioniert wie ich mir das vorstelle.
ciao walter
Zitat von: wkarl am 30 Dezember 2015, 09:57:09
Hallo,
nachdem ich den Grund beheben konnte warum meine FT-UI keine einzige Seite mehr vernünftig anzeigte, habe ich meine original FT-UI (ohne Templates) am Beispiel der Demo-Widgets-Seite 'bereinigt'. Der Aufbau neuer Seiten als auch das Refresh funktionieren fast 100%ig.
Also habe ich alles was unter tablet ist nach tablet_iPad kopiert und einen entsprechenden HTTPSRV definiert.
Hallo Walter,
ich hatte vor einiger Zeit auch das Problem, dass ich Templates für Seiten/Gruppen von Widgets u.ä. brauchte. Es sind aber Probleme zu erwarten, wenn man das am Frontend macht (Caching etc). Ich habe deshalb ein Backendmodul gemacht, dass ebenfalls Templates und Ersetzung ermöglicht (auch rekursiv).
Ich habe das Modul mal hier beschrieben: http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991 (http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991)
Bei mir ist es im Einsatz und funktioniert absolut stabil
Zitat von: viegener am 30 Dezember 2015, 15:01:08
Ich habe das Modul mal hier beschrieben: http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991 (http://forum.fhem.de/index.php/topic,43110.msg350991.html#msg350991)
Hallo viegener,
das sieht sehr vielversprechend aus. Werde es die nächsten Tage testen. Wird es mal Bestandteil von fhem?
ciao walter
Klar, wenn es Interesse gibt, würde ich es auch Teil der offiziellen Auslieferung machen.
Ich wollte dafür auf Feedback warten und neue Funktionen einbauen wenn gewünscht.
Eine Idee war ein UI auf dynamisch aus Templates zusammenzubauen, in dem man für einen Typ ein Template angibt und nur noch den Raum aufruft, das Tablet UI würde dann dynamisch aus allen Devices (pro Typ ein Template) des Raums zusammengebaut.
Ich habe heute Templates für SOMFY (Rolläden), Thermostate (Homematic), Thermo+Hygro-Sensoren, Fenstersensoren, einfache Schaltsteckdosen
Johannes
Hallo zusammen,
das Thema ist jahrelang nicht mehr in diesem Thread besprochen worden, aber es passt genau dazu.
Inzwischen habe ich mir ein Template gebaut mit dem ich alle meine Müllsymbole in gleicher Weise darstellen kann.
Ich möchte diese jetzt in einem Popup darstellen.
Das funktioniert auch.
Ich möchte aber dieses identische Popup noch für einen zweiten Müllkalender verwenden.
Wenn ich dafür ein Template baue wird der Aufruf der Abfallsymbol templates im Popuptemplate nicht ausgeführt.
Gibt es schon eine Lösung für verschachtelte Templates ?