2

以下の例のように、Thymeleafを使用してフラグメント内の子要素の位置を選択したいと考えています。Thymeleafの断片の中で子要素の位置を選ぶ方法は?

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> 

予想される出力:

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

が、それは可能ですか?もしそうなら、どうしたらいい?

答えて

1

レイアウトを介して行うことができます。
これにはThymeleaf Layout Dialectを使用してください。
(あなたがSpring Bootを使用している場合、それはすでにオンになっています!)

レイアウトはこの形式で表示されます。

<!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> 

そして、あなたのページは次のようになります。

<!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私のThymeleafテストプロジェクトでそれを掘り起こしました。あなたが望んでいたように、ブラウザでページのソースコードが判明:

source code of the page

+0

document.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>' 

は、名前空間を宣言することが本当に必要ですか?私は名前空間宣言なしでそれを作ったし、すべての作品は魅力のようだ。 – Natanael

+0

サム、あなたの答えは私の問題の一部を解決するためにsatsfactoryですが、私はまだ疑いがあります。以下の詳細 – Natanael

1

編集:

次の質問が解決されます!これはIncludes and Fragmentsを使用して行うことができます。


サム、あなたの答えは私の問題の一部を解決するためにsatsfactoryですが、私はまだ疑問があります。

このメソッドは、要素とそのすべての祖先をレイアウトで指定されたものに置き換え、元の要素の内容を保持します。

これはレイアウトではうまくいきますが、フラグメントの内容を置き換えるのはどうですか?

私は次のようなシナリオを想定しています。私はブートストラップウィジェットのライブラリを開発しています。 navbarのような一部のウィジェットには内部コンテナがあり、このコンテナには他の要素が含まれます。例:

断片指数インサイド/ 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> 

。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> 

そして、次のような出力を得る:

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> 

あなたは違いを理解していますか?あなたが私に示した方法は、要素とその祖先を置き換えますが、内容を保存します。結果として、ドキュメントルート全体が置き換えられます。

状況によっては、置き換えられる要素だけを交換する必要があります。私はその親と内容も保つ必要があります。


私はそれが解決したと言いました。

レイアウト/ navbar.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> 
関連する問題