[JAVA] Utilisation de th: include, th: replace, th: insert, th: fragment in Thymeleaf

Préface

Post-scriptum (2019/6/29)

th: include est obsolète depuis thymeleaf 3.0. Vous l'avez souligné dans les commentaires. Merci beaucoup. Il n'y a aucune description qui sera abolie pour le moment, mais il semble préférable de ne pas utiliser th: include.

Qu'est-ce que Thymeleaf?

Faisons Spring, qui est un framework java! Si tel est le cas, le modèle de vue le plus couramment utilisé est Thymeleaf.

Cette Thymeleaf vous permet également de créer un fichier modèle pour chaque pièce et de le charger en utilisant th: include, th: replace ou th: insert. Lorsque je l'utilisais pour la première fois, th: include? Th: replace? Th: insert? Que devrais-je utiliser? Puisqu'il s'agissait de quelque chose comme ça, je vais le résumer.

environnement

Connaissances préalables

Utilisation de base de th: include, th: replace, th: insert

En supposant que vous ayez la vue partielle suivante

part.html


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

En cas d'inclusion, il sera ajouté en tant que petit élément

include.html


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

En cas de remplacement, les éléments sont remplacés

replace.html


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

Dans le cas de l'insertion, l'élément est inséré. Le résultat est le même que l'inclusion.

insert.html


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

Il existe les méthodes suivantes pour spécifier le modèle

templateName est le chemin des répertoires de modèles. Dans le cas suivant, ce sera «composants / partie».

 templates
   └── components
         └── part.html

Vous pouvez également spécifier this :: fragmentName ou :: fragmentName, où cela pointe vers votre propre modèle.

Définir plusieurs parties en html th: fragment

Exemple de définition

fragment.html


<div id="fragment1" th:fragment="template1()">
  <span>template1</span>
</div>
<div id="fragment2" th:fragment="template2(text)">
Vous pouvez également passer des arguments
  <span th:text="${text}"></span>
</div>

Sujet principal

L'opération était la suivante pour la lecture sans utiliser le fragment ci-dessus. Il n'y a aucune différence entre th: include et th: insert.

--th: include-> Ajouter le html chargé au sous-élément --th: replace-> L'élément est remplacé par le html chargé --th: insert-> Ajouter le html chargé au sous-élément

Soyez prudent lorsque vous utilisez des fragments. Le fragment à utiliser est l'exemple de définition ci-dessus.

th: inclure et th: fragment

include.html


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

L'intérieur de th: fragment est passé. Les éléments tels que id quand th: inclus restent. Par conséquent, vous pouvez l'utiliser comme suit.

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

Il est plus naturel d'afficher les pièces elles-mêmes à l'aide du modèle parent. La classe à appliquer est également reflétée, donc si vous l'utilisez correctement, vous pouvez la réutiliser correctement en tant que composant.

th: replace et th: fragment

replace.html


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

Le point à noter est qu'il remplace l'endroit où th: fragment est défini. L'identifiant et s'il est défini du côté th: replace ne sont pas déterminés.

th: insert et th: fragment

insert.html


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

L'élément de th: fragment est inséré. Comme avec th: include, id reste, donc th: if etc. peut être utilisé.

Résumé

Lorsque th: fragment est utilisé, le résultat de sortie diffère entre th: include et th: replace ou th: insert. Si vous souhaitez utiliser des éléments tels que class et th: if du côté parent, il est plus simple d'utiliser th: insert. th: include est obsolète depuis la version 3.0. Comme vous pouvez le voir, est-ce parce qu'il est difficile de comprendre le comportement lors de l'utilisation de fragment?

Quand utilisez-vous th: replace?

Il peut être utilisé lors de la création d'un modèle commun.

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>
<!--Côté utilisateur-->
<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>
<!--résultat-->
<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>

~ {} est une méthode de description appelée expression de fragment. Vous pouvez passer le contenu réel de la balise comme argument en utilisant ~ {}. Puisque la partie utilisant th: replace est la balise head, vous pouvez voir visuellement que le contenu de la balise head est passé à l'argument de fragment. Il force également la balise fragment à head en utilisant th: replace. Même si un inconnu le voit, je me demande si je devrais écrire le contenu de la balise head.

Avec include, la balise fragment peut être n'importe quoi, il semble donc que vous n'ayez pas à dire "la balise meta est dans le div ...". Puisqu'il s'agit d'un fichier html en premier lieu, il doit avoir la grammaire correcte en html sans interpréter thymeleaf.

Pour ceux qui ne veulent pas se soucier des détails

En utilisant th: block, je pense que le champ d'application devrait être le même en conséquence.

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

Site de référence

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

Recommended Posts

Utilisation de th: include, th: replace, th: insert, th: fragment in Thymeleaf
Utilisation de th: include, th: replace, th: insert, th: fragment in Thymeleaf
Comment utiliser Thymeleaf avec Spring Boot
[Ruby] Distinction et utilisation des boucles dans Ruby