[JAVA] Verwendung von th: include, th: replace, th: insert, th: fragment in Thymeleaf

Vorwort

Nachtrag (29.06.2019)

th: include ist seit thymeleaf 3.0 veraltet. Sie haben in den Kommentaren darauf hingewiesen. Vielen Dank. Es gibt keine Beschreibung, die zu diesem Zeitpunkt abgeschafft wird, aber es scheint besser, th: include nicht zu verwenden.

Was ist Thymeleaf?

Lass uns Spring machen, ein Java-Framework! In diesem Fall ist Thymeleaf die am häufigsten verwendete Ansichtsvorlage.

Mit diesem Thymeleaf können Sie auch eine Vorlagendatei für jedes Teil erstellen und mit th: include, th: replace oder th: insert laden. Als ich es zum ersten Mal benutzte, war th: include? Th: replace? Th: insert? Welches soll ich verwenden? Da es so etwas war, werde ich es zusammenfassen.

Umgebung

Vorausgesetztes Wissen

Grundlegende Verwendung von th: include, th: replace, th: insert

Angenommen, Sie haben die folgende Teilansicht

part.html


<div id="children">
  part
</div>

Im Falle von include wird es als kleines Element hinzugefügt

include.html


<div id="parent" th:include="part">text</div>
<!--Ergebnis-->
<div id="parent">
  <div id="children">
    part
  </div>
</div>

Beim Ersetzen werden die Elemente ersetzt

replace.html


<div id="parent" th:replace="part">text</div>
<!--Ergebnis-->
<div id="children">
  part
</div>

Beim Einfügen wird das Element eingefügt. Das Ergebnis entspricht dem Einschließen.

insert.html


<div id="parent" th:insert="part">text</div>
<!--Ergebnis-->
<div id="parent">
  <div id="children">
    part
  </div>
</div>

Es gibt die folgenden Methoden, um die Vorlage anzugeben

templateName ist der Pfad aus den Vorlagenverzeichnissen. Im folgenden Fall handelt es sich um "Komponenten / Teil".

 templates
   └── components
         └── part.html

Sie können auch this :: fragmentName oder :: fragmentName angeben, wobei dies auf Ihre eigene Vorlage verweist.

Definieren Sie mehrere Teile in HTML th: Fragment

Definitionsbeispiel

fragment.html


<div id="fragment1" th:fragment="template1()">
  <span>template1</span>
</div>
<div id="fragment2" th:fragment="template2(text)">
Sie können auch Argumente übergeben
  <span th:text="${text}"></span>
</div>

Hauptthema

Die Operation war wie folgt zum Lesen ohne Verwendung des obigen Fragments. Es gibt keinen Unterschied zwischen th: include und th: insert.

--th: include-> Füge das geladene HTML zum Unterelement hinzu --th: replace-> Das Element wird durch das geladene HTML ersetzt --th: insert-> Füge das geladene HTML zum Unterelement hinzu

Seien Sie vorsichtig, wenn Sie Fragmente verwenden. Das zu verwendende Fragment ist das obige Definitionsbeispiel.

th: include und th: fragment

include.html


<div id="include" th:include="fragment::template1()">
  <span>text</span>
</div>
<!--Ergebnis-->
<div id="include">
  <span>template1</span>
</div>

Das Innere des Fragmentes wird übergeben. Elemente wie id wenn th: enthalten bleiben. Daher können Sie es wie folgt verwenden.

<div th:if=${isDisplay} th:include="fragment::template1()"></div>

Es ist natürlicher, die Teile selbst mit der Vorlage auf der übergeordneten Seite anzuzeigen. Die anzuwendende Klasse wird ebenfalls angezeigt. Wenn Sie sie also ordnungsgemäß verwenden, können Sie sie ordnungsgemäß als Komponente wiederverwenden.

th: ersetzen und th: fragment

replace.html


<div id="replace" th:replace="fragment::template1()"></div>
<!--Ergebnis-->
<div id="fragment1">
  <span>template1</span>
</div>

Der zu beachtende Punkt ist, dass er die Stelle ersetzt, an der das Fragment definiert ist. Die ID und, falls auf der Seite th: replace definiert, werden nicht bestimmt.

th: insert und th: fragment

insert.html


<div id="insert" th:insert="fragment::template1()"></div>
<!--Ergebnis-->
<div id="insert">
  <div id="fragment1">
    <span>template1</span>
  </div>
</div>

Das Element th: fragment wird eingefügt. Wie bei th: include bleibt id erhalten, so dass th: if usw. verwendet werden kann.

Zusammenfassung

Wenn th: fragment verwendet wird, unterscheidet sich das Ausgabeergebnis zwischen th: include und th: replace oder th: insert. Wenn Sie Elemente wie class und th: verwenden möchten, ist es auf der übergeordneten Seite einfacher, th: insert zu verwenden. th: include ist seit 3.0 veraltet. Wie Sie daraus sehen können, liegt es daran, dass es schwierig ist, das Verhalten bei der Verwendung von Fragmenten zu verstehen?

Wann verwenden Sie th: replace?

Es kann beim Erstellen einer gemeinsamen Vorlage verwendet werden.

fragment.html


<head th:fragment="head(link, script)">
  <meta content="text/html; charset=UTF-8"/>
  <link href="common-link"/>
  <script src="common-src"/>
 
  <th:block th:if="${link != null}" th:include="${link}"></th:block>
  
  <th:block th:if="${script != null}" th:include="${script}"></th:block>
</head>
<!--Benutzerseite-->
<html>
<head th:replace="fragment::head(~{head/link}, ~{head/sccript})">
  <link href="xxx"/>
  <link href="yyy"/>
  <script src="xxx"/>
  <script src="yyy"/>
</head>
<body>
  content
</body>
</html>
<!--Ergebnis-->
<html>
<head>
  <meta content="text/html; charset=UTF-8"/>
  <link href="common-link"/>
  <script src="common-src"/>

  <link href="xxx"/>
  <link href="yyy"/>

  <script src="xxx"/>
  <script src="yyy"/>
</head>
<body>
  content
</body>
</html>

~ {} ist eine Beschreibungsmethode, die als Fragmentausdruck bezeichnet wird. Sie können den eigentlichen Tag-Inhalt als Argument übergeben, indem Sie ~ {} verwenden. Da der Teil, der th: replace verwendet, das Head-Tag ist, können Sie visuell sehen, dass der Inhalt des Head-Tags an das Argument fragment übergeben wird. Wir verwenden auch th: replace, um das Fragment-Tag auf head zu setzen. Selbst wenn ein Fremder es sieht, frage ich mich, ob ich den Inhalt des Head-Tags schreiben soll.

Wenn es eingeschlossen ist, kann das Fragment-Tag alles sein, so dass es nicht nötig ist zu sagen, dass sich das Meta-Tag im div befindet .... Da es sich in erster Linie um eine HTML-Datei handelt, sollte sie die richtige Grammatik als HTML haben, ohne das Blatt zu interpretieren.

Für diejenigen, die sich nicht um die Details kümmern möchten

Durch die Verwendung von th: block sollte der Anwendungsbereich meiner Meinung nach derselbe sein.

<th:block th:fragment="template()">
  <div>
    <span>template</span>
  </div>
</th:block>

Referenzseite

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html

Recommended Posts

Verwendung von th: include, th: replace, th: insert, th: fragment in Thymeleaf
Verwendung von th: include, th: replace, th: insert, th: fragment in Thymeleaf
Verwendung von Thymeleaf mit Spring Boot
[Ruby] Schleifenunterscheidung und Verwendung in Ruby