春 - Thymeleaf反復

Question

が、私はそのような構造を得るためにしたいとします

<div> 
    <ul> 
     <!-- Item --> 
     <li class="item"> 
      <span class="more no-select" data-target=".item1">+</span> 
      <span class="right"></span> 
     </li> 

     <!-- Children --> 
     <li class="item1 hidden nojs"> 
      <span class="spacing"></span> 
      <a href="mylink">My link</a> 
     </li> 
     <li class="item1 hidden nojs"> 
      <span class="spacing"></span> 
      <a href="mylink">My link</a> 
     </li> 
     <li class="item1 hidden nojs"> 
      <span class="spacing"></span> 
      <a href="mylink">My link</a> 
     </li> 
    </ul> 
</div> 

は、基本的には各itemは[0 ... n]はchildrenを持っています。 Thymeleafを使用してこの構造体を得ること

私は以下のように主な項目を定義することから始めたい：itemはそのitem.childrenを通じてIサイクルを行う方法、範囲が限られているということで、

<li th:each="item : ${items}"> 
    <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span> 
    <span class="right"></span> 
</li> 

しかし、その後は？

Answer 1

私はあなたがより高いレベルにth:eachを移動する必要があると思うので、各li要素の後に子を追加することもできます。 th:block要素は、HTML要素を作成しないため、Thymeleaf属性を保持できるため、便利です。

次のように解決策の概要は次のようになります。

<th:block th:each="item : ${items}"> 
    <!-- Item --> 
    <li class="item"> 
     item content ... 
    </li> 
    <!-- Children --> 
    <li th:each="child : ${item.children}" class="item1 hidden nojs"> 
     child content ... 
    </li> 
</th:block> 

Answer 2

<li th:each="item : ${items}"> 
    <span th:each="child : ${item.children}" class="more no-select" th:attr="data-target='.' + ${item.id}">+</span> 
</li> 

これはあなたが探しているものですか？

---

あなたの質問が更新されています。 OK、答えは：いいえ、あなたはこのようにすることはできません。 <li>は均質なデータを含んでいると考えられます。 htmlコーダーは、表現の特定の結果を達成するために表示している方法と同じですが、ハックであり、意味的に正しいものではないため、避けるべきです。

あなたはこのような何かをするために、デザインを再考する必要があります。

<li th:each="item : ${items}"> 
     <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span> 
     <span th:each="child : ${item.children}" class="some class" th:attr="data-target='.' + ${item.id}">child related things</span> 
    </li> 

そして表現は、CSSによって管理されるべきです。

---

ハック方法 は、私はそれが進むべき道だとは思わない...これを追加 を遅くすることだったが、コメントで、あなたはThymeleafはdidnのものを行うことができない唯一のエンジンであることを述べました「tは私には非常にクールに見える:) 私はそれに反対投票が、あなたはth:blockを見て、それを利用したりすることがあります： http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#synthetic-thblock-tag実際にこれを達成することができた（テストしていない、それを自分で試してみてください）：

<th:block th:each="item : ${items}"> 
    <li th:text="item1"> 
      <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span> 
    </li> 
    <li th:each="child : ${item.children}"> 
     <span class="more no-select" th:attr="data-target='.' + ${child.id}">child related things</span> 
    </li> 
</th:block> 

Answer 3

あなたはかなり簡単にthymeleafでこれを行うことができます。

<th:block th:each="item : ${items}"> 
    <li> 
     <span class="more no-select" th:attr="data-target='.' + ${item.id}">+</span> 
     <span class="right"></span> 
    </li> 

    <li th:each="child : ${item.children}" class="item1 hidden nojs"> 
     <span class="spacing"></span> 
     <a href="mylink">My link</a> 
    </li> 
</th:block>