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:

  1. context
  2. request
  3. 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&ouml;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>
jsvars

Vorschau des oben dargestellten beispielhaften TAL-Codes (2)

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