HTMLは

Question

私はこのようなコードを持っています。このような

<ul th:each="pet : ${petCollection}"> 
       <li class="list-group-item" >Dapibus ac facilisis in 
       <button class="badge" onclick="window.location.href='/'">Continue</button> 
       <button type="submit" class="badge">Info</button> 
       </li> 
      </ul> 

そのディスプレイ：

が、私はイムは、これを追加するので、私のリスト内の静的コンテンツたくない：

を

<ul th:each="pet : ${petCollection}"> 
       <li class="list-group-item" th:text="${pet.petName}">Dapibus ac facilisis in 
       <button class="badge" onclick="window.location.href='/'">Continue</button> 
       <button type="submit" class="badge">Info</button> 
       </li> 
      </ul> 

しかし、これを取得しています：

長い話を短く0

、ボタンがが欠落している、私はそれを解決できる方法任意のアイデアの男？

Answer 1

th：textを要素に追加すると、その要素の内容全体が置換されます。この場合、<button />タグにはペット名が上書きされます。これを修正するには、th：textをそれ自身の別のタグに入れて、残りのタグが影響を受けないようにします。このような何か：

<ul th:each="pet : ${petCollection}"> 
    <li class="list-group-item"> 
    <span th:text="${pet.petName}">Dapibus ac facilisis in</span> 
    <button class="badge" onclick="window.location.href='/'">Continue</button> 
    <button type="submit" class="badge">Info</button> 
    </li> 
</ul>