HTML-Code ausgeben
Beim Rendern von tal:replace
und tal:content
werden Sonderzeichen (z.B. > ) automatisch in HTML-Entities umgewandelt (z.B. >) und HTML-Code damit aufgelöst. Um das zu hindern, wird dem TAL-Ausdruck das Keyword structure
vorangestellt.
<div tal:content="structure python:childNode.getBodyContent(request)" />
Problem-Punkt ID-Name
Anstatt
python:context.penguin.gif
wird getattr-Konstrukt verwendet
python:getattr(context, 'penguin.gif')
oder ein Pfad-Ausdruck
path:context/images/penguin.gif
Aufruf einer DTML-Methode
DTML-Methoden brauchen beim Aufruf per TAL mindestens die beiden ersten Parameter:
- context
- request
- fakultativ weitere Variablen
<span tal:replace="structure python:here.my_dtml(here,request,param='hello')" >This will be replaced by calling a DTML method. </span>
Unicode-Konflikt lösen
Unter bestimmten Firefox-Versionen kann im http-Request die ACCEPT_CHARSET
-Variable fehlen; damit der Zope-Publisher aus diesem Grunde keine Fehler erzeugt, kann man diese zu Beginn des standard_html
-Templates prophylaktisch setzen:
# standard_html # <html xmlns=http://www.w3.org/1999/xhtml xml:lang="de" lang="de" xmlns:tal=http://xml.zope.org/namespaces/tal tal:define="zmsroot here/content; this here; charsetter python:here.unicodeconflictresolver()">
# Py-Script unicodeconflictresolver # request = container.REQUEST response = request.response response.setHeader('Content-Type','text/html; charset=utf-8') if not request.environ.get('HTTP_ACCEPT_CHARSET',None): request.environ['HTTP_ACCEPT_CHARSET'] = 'ISO-8859-1,utf-8;q=0.7,*;q=0.7' return None
Javascript und TAL
HTML-Erzeugung: Der Zope-TAL-Renderer ist extrem-empfindlich, wenn man z.B. HTML-Fragmente in JS/jquery erzeugen möchte. Man muss die spitzen Klammern "isolieren":
$('#meine_id').html('Lösung: '+myvar+' <'+'a href="..')
Dynamisches Javascript mit TAL erzeugen
Da TAL - z.B. im Gegensatz zu DTML - valides HTML/XHTML zu sein hat, scheitert eine expliziter Aufruf von TAL-Elementen innerhalb des <script>
-Elementen bzw. deren Interpretation wird verhindert. Also muss man den Javascript-Code - sofern er Variablenwerte aus dem ZMS-Kontext übernehmen muss - zusammenbauen. Es werden drei Arten beschrieben, wie man dynamischen Javascript-Code in Page-Templates einbinden kann:
1. Javascript-Code als Python-Script separieren: Der dynamische Javascript-Code wird mittels Python-Script erzeugt und dieses per TAL-Ausdruck in das ZPT eingesetzt. Im folgende Beispiel erzeugt das Py-Script a_javascript
auf Basis einer ZMS- und einer Zope-Variable ein kurzes Javascript samt umschließender <script>
;-Tags. Im ZPT ruft der TAL-Ausdruck den Py-Script-Rückgabewert in strukturierter Form ab.
# Python Script: a_javascript # request = container.REQUEST response = request.response zms = context.live.zmspublishing.content mytitle = zms.attr('title') mytime = context.ZopeTime() script = \ """ <script language="javascript" type="text/javascript"> myvar = 'Document Title: %s, Date: %s'; alert(myvar); </script> """ % (mytitle,mytime) return script
# ZPT/TAL-Code # <html> <head> <title tal:content="template/title">The title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <h1 tal:content="here/title_or_id">title</h1> <script language="javascript" type="text/javascript" tal:replace="structure here/a_javascript"> //Javascript Code </script> </body> </html>
2. data-Attribute setzen und mit jquery auslesen: Der folgende Trick nutzt das HTML5-typische "data-"Attribut als Zwischenspeicher, der per jquery-Ausdruck im script-Element ausgelesen werden kann:
<html> <head> <title tal:content="template/title">The title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </head> <body> <h1 tal:content="here/title_or_id">title</h1> <div id="vars" style="display:hidden" tal:attributes="data-mytitle here/title_or_id; data-mytime python:context.ZopeTime()"></div> <script> var myvar = $('#vars').data('mytitle'); myvar = 'Document Title: ' + myvar + ', Date: ' + $('#vars').data('mytime'); alert(myvar); </script> </body> </html>
3. Schnelles Prototyping mit "unsichtbarem" script-Element: Wenn der TAL-Preview irrelevant ist bzw. der TAL-Code nicht primär konsistentes HTML ergeben muss, so kann man auch diesen Workaround verwenden, bei dem JavaScript-Code und TAL vermischt werden können
<html> <head> <title tal:content="template/title">The title</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <h1 tal:content="here/title_or_id">title</h1> <tal:tag replace="structure string:<script>" /> var myvar = 'Document Title: <tal:block tal:replace="here/title_or_id" />'; myvar += ', Date: <tal:block tal:replace="python:context.ZopeTime()" />'; alert(myvar); <tal:tag replace="structure string:</script>" /> </body> </html>
Datum via ZMS-API
Das Code-Beispiel prüft auf Vorhandensein des Attributes date1 und gibt per tal:content den GER-formatierten Datumswert als Element-Content aus. Per tal:attributes wird das class-Attribute gesetzt – entweder "date" oder "date expired"; die Prüfung vergleicht die ZopeTime mit dem ENG-formatierten Attributwert von date1.
<span class="date" tal:condition="python:here.attr('date1')" tal:content="python:context.getLangFmtDate(here.attr('date1'),'ger','DATE_FMT')" tal:attributes="class python:['date','date expired'][context.ZopeTime( context.getLangFmtDate( here.attr('date1'),'eng','%Y/%m/%d')) < context.ZopeTime()]" >01.01.2001</span>
Erstellt von: Dr. F. Hoffmann , erstellt am: 25.02.2014 , zuletzt geändert: 25.02.2014