Fluid-Templates testen

Um die Fluid-Templates meiner Typo3-Website zu testen, erstelle ich offline ein paar HTML-Dateien, die die Partials via jQuery nachladen.

Eines meiner Fluid-Templates sieht z.B. so aus:

<f:layout name="defaultLayout" />
<f:section name="header">
  <f:render partial="defaultHeader" arguments="{_all}"/>
</f:section>
<f:section name="content">
  <f:render partial="Content-12C" arguments="{_all}"/>
</f:section>

Die passende defaultLayout.html dazu:

<f:render section="header" />
<f:render partial="defaultNav" arguments="{_all}" />
<f:render section="content" />
<f:render partial="defaultFooter" arguments="{_all}" />

Wie man sieht, werden mehrere Partials (z.B. defaultFooter.html) in die Webseite gerendert. Dies lässt sich leicht durch jQuery simulieren. Dazu erstelle ich für jedes Layout eine HTML-Datei, die die JavaScript- und CSS-Dateien einbindet und dann via jQuery.load() die Partials und etwas Dummy-Content lädt. Für den Dummy-Content müssen die DIV-Tags der Partials entsprechende IDs bekommen.

<html>
  <head>
    <title>Test Startseite</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="fileadmin/templates/css/app.css"/>
  </head>
  <body>
    <!-- Hier kommen die Platzhalter für die Partials -->
    <div id="headerpartial"></div>
    <div id="navpartial"></div>
    <div id="contentheaderpartial"></div>
    <div id="contentpartial"></div>
    <div id="footerpartial"></div>
     
    <script src=".../js/libs/jquery/jquery.js" type="text/javascript"></script>
    <!-- Hier werden die Partials nach und nach geladen -->
    <script type="text/javascript">
      $('#headerpartial').load('.../startHeader.html', function(){
        $('#navpartial').load('.../defaultNav.html', function(){
          $('#contentpartial').load('.../Content-9-3.html', function(){
              $('#maincolumn').load('TestLorem.html');
              $('#rightcolumn').load('TestUL.html');
          });
          $('#footerpartial').load('.../defaultFooter.html');
        });
      });
    </script>
    <!-- Weitere Scripte, die von der Webseite benötigt werden -->
    <script src=".../js/libs/foundation.js"></script>
    <script src=".../js/libs/foundation.topbar.js"></script>
  </body>
</html>

Im obigen Beispiel enthalten TestLorem.html und TestUL.html die Dummy-Daten, die bei der aktiven Webseite mit dem Inhalt aus Typo3 gefüllt werden.

Man sieht, dass das nächste Partial immer erst in der complete-Funktion geladen wird. Da jQuery.load() asynchron ausgeführt wird, ist das besonders für den Dummy-Content wichtig. Dieser soll ja in den DIV-Tags des Partials geladen werden. Das Partial muss also fertig geladen sein, damit jQuery sie über ihren Selektor ansprechen kann.