2016-08-30 1 views
1

Ich brauche ein Element zu erstellen, die zu diesem HTML macht, so dass das Symbol Teil der a ‚s inneren HTML ist:Symbol auf ein (Link) Element/Element in Elemente hinzufügen

<li> 
    <a href="/pricing/de" id="de"> 
     <i class="fa fa-circle-o"></i>Deutschland 
    </a> 
</li> 

Mein aktuelle Ansatz ist die folgende

<li th:each="country : ${countryList}"> 
    <a th:href="@{country.getKey()}" th:text="${country.getValue()}"> 
     <i th:class="fa fa-square-o"></i> 
    </a> 
</li> 

Aber das natürlich überschreibt das Symbol mit dem th:text. Hinzufügen des Symbols zum Text scheint auch nicht zu funktionieren ...

Wie mache ich das in thymeleaf?

Antwort

2

Es gibt viele Möglichkeiten, damit umzugehen. Ich würde dies wahrscheinlich tun:

<li th:each="country : ${countryList}"> 
    <a th:href="@{country.key}" > 
     <i th:class="fa fa-square-o"></i><span th:text="${country.value}" /> 
    </a> 
</li> 

Aber Sie könnten die zusätzliche Spanne nicht wollen, so dass Sie ein th verwenden: Block.

<li th:each="country : ${countryList}"> 
    <a th:href="@{country.key}"> 
     <i th:class="fa fa-square-o"></i><th:block th:text="${country.value}" /> 
    </a> 
</li> 

oder Inline nur den Text selbst.

<li th:each="country : ${countryList}"> 
    <a th:href="@{country.key}" th:inline="text"> 
     <i th:class="fa fa-square-o"></i>[[${country.value}]] 
    </a> 
</li> 

edit: Auch wenn Sie Ihre Eigenschaften Benennung nach Konventionen Java Beans, sollten Sie nur statt .getKey verwenden .key()

Verwandte Themen