Wie wählt man die Position der Kinderelemente in einem Thymelaft-Fragment?

Ich möchte die Position der Kinder Elemente in einem Fragment mit Thymeleaf wie in den folgenden Beispielen wählen.Wie wählt man die Position der Kinderelemente in einem Thymelaft-Fragment?

fragments.html:

<div th:fragment="awesomeFragment"> 
    Some Text 
    <div><!-- children must be here --></div> 
</div>

view.html:

<div th:replace="fragments :: awesomeFragment"> 
    <a href="www.google.com"/> 
</div>

Erwartete Ausgabe:

<div> 
    Some Text 
    <div><a href="www.google.com"/></div> 
</div>

Ist es möglich? Wenn ja, wie könnte ich das tun?

Quelle

2016-04-08 Natanael

Sie können es über Layouts tun.
Verwenden Sie hierfür Thymeleaf Layout Dialect.
(Wenn Sie Spring Boot es bereits eingeschaltet mit!)

Das Layout wird in dieser Form präsentiert:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> 
<head> 
    <title></title> 
</head> 
<body> 
    <header> 
     Some text 
    </header> 
    <div layout:fragment="content"> 
     <p>Page content goes here</p> 
    </div> 
</body>

Und Sie Seite wird sein:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:th="http://www.thymeleaf.org" 
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" 
    layout:decorator="base/test"> 
<head> 
    <title></title> 
</head> 
<body> 
    <div layout:fragment="content"> 
     <a href="www.test.com">Test.com</a> 
    </div> 
</body>

I t ried es in meinem Thymeleaf Testprojekt. Der Quellcode der Seite in Browser stellte sich heraus, wie man wollte:

Quelle

2016-04-08 04:03:55 sanluck

Ist es wirklich notwendig Namespaces zu erklären? Ich habe es ohne Namespace-Deklarationen gemacht und alles funktioniert wie ein Zauber. – Natanael

Sam, obwohl deine Antwort satsfactory ist, um einen Teil meiner Probleme zu lösen, habe ich noch Zweifel. Mehr Details unten – Natanael

Edit:

Die folgende Frage ist gelöst! Es kann mit Includes and Fragments erfolgen.

Sam, obwohl Ihre Antwort Satsfactory ist, um einen Teil meiner Probleme zu lösen, habe ich noch einen Zweifel.

Diese Methode ersetzt ein Element und alle seine Vorfahren durch die im Layout angegebenen Elemente und behält den Inhalt des ursprünglichen Elements bei.

Es funktioniert gut für Layouts, aber wie ersetzen Sie nur den Inhalt eines Fragments?

Nehmen wir an, ich habe das folgende Szenario. Ich entwickle eine Bibliothek von Bootstrap-Widgets. Einige Widgets, wie Navbar, haben interne Container und diese Container enthalten andere Elemente. Bsp .:

Fragmente/navbar.html

<!-- navbar --> 
<div th:fragment="navbar" class="navbar"> 
    <div class="navbar-inner">   
     <a class="brand" href="#">Awesome Thymeleaf Navbar</a> 
     <ul class="nav"> 
      <!-- children goes here -->     
     </ul> 
    </div> 
</div> 
<div>

Innen-Index.html

This is my Navbar: 
<div th:replace="fragments/navbar :: navbar"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Link</a></li> 
    <li><a href="#">Link</a></li> 
</div>

und nutzen Sie die folgende Ausgabe:

This is my Navbar:  
    <!-- navbar --> 
    <div th:fragment="navbar" class="navbar"> 
      <div class="navbar-inner">   
       <a class="brand" href="#">Awesome Thymeleaf Navbar</a> 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
      </div> 
     </div> 
    <div>

Verstehen Sie den Unterschied? Die Art und Weise, wie du mir gezeigt hast, ersetzt das Element und seine Vorfahren, behält aber den Inhalt bei. Das Ergebnis ist der gesamte Dokumentstamm, der ersetzt wird.

In einigen Situationen muss ich nur das zu ersetzende Element ersetzen. Ich muss auch seine Eltern und Inhalte behalten.

Wie gesagt, es ist gelöst. Hier geht ein Beispiel dafür, wie dies zu implementieren:

Layouts/navbar.html:

<!DOCTYPE html> 
<html> 
<body>  
    <div layout:fragment="navbar" class="navbar"> 
     <div class="navbar-inner">   
      <a class="brand" href="#">Navbar</a> 
      <ul class="nav" layout:fragment="navbar-content"> 
       <!-- children goes here -->     
      </ul> 
     </div> 
    </div> 
</body> 
</html>`

document.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
     <title>Home</title> 
    </head> 
    <body>This is my Navbar: 
     <div layout:include="layouts/navbar :: navbar" th:remove="tag"> 
      <ul layout:fragment="navbar-content"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Link</a></li> 
       <li><a href="#">Link</a></li> 
      </ul> 
     </div> 
    </body> 
</html>

Quelle

2016-04-09 20:27:18 Natanael

Wie wählt man die Position der Kinderelemente in einem Thymelaft-Fragment?

Antwort

Verwandte Themen