代码之家 › 专栏 › 技术社区 › mikezang

部分html未由thymeleaf呈现

thymeleaf class html

0

mikezang · 技术社区 · 10 年前

使用thymeleaf,我试图生成以下结构:

<li class="active">
    <a href="/bootstrap/dashboard">Dashboard</a>
</li>
<li>
    <a href="#">Charts<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li><a href="/bootstrap/flot">Flot Charts</a></li>
    </ul>
</li>

我修改如下:

<li th:each="menu : ${sideForm.menu}" th:class="${activeItem} == ${menu.item} ? 'active' : null">
    <a href="#" th:if="${#lists.isEmpty(menu.submenu)}" th:href="@{'/' + ${sideForm.parentMenu} + '/' + ${menu.item}}" th:text="#{${menu.title}}">Item</a>
    <a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:text="#{${menu.title}}">Item<span class="fa arrow" th:class="fa arrow"></span></a>
    <ul class="nav nav-second-level" th:unless="${#lists.isEmpty(menu.submenu)}" th:class="'nav nav-second-level'">
        <li th:each="submenu : ${menu.submenu}">
            <a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:href="@{'/' + ${sideForm.parentMenu} + '/' + ${submenu.item}}" th:text="#{${submenu.title}}">Sub Item</a>
        </li>
    </ul>
</li>

呈现如下:

<li class="active">
    <a href="/bootstrap/dashboard">dashboard</a>
</li>
<li>
    <a href="#">Charts</a>
    <ul class="nav nav-second-level">
        <li><a href="/bootstrap/flot">Flot Charts</a></li>
    </ul>
</li>

我补充道 "<span class="fa arrow" th:class="fa arrow"></span>" ,为什么它不是用真正的html呈现的?我该如何修复它?

1 回复 | 直到 10 年前

1

Alexandru Severin 8 年前

这个 th:text 来自 <a> 标记使thymeleaf用给定值替换其内容,同时替换 span 标签

<a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:text="#{${menu.title}}">
    <!-- everything in the <a> tag will be deleted by the th:text -->
    Item     
    <span class="fa arrow" th:class="fa arrow"></span>

</a>

您应该将标题包装在另一个html标签中,例如 跨度 或 th:block (th:块在处理后不会渲染)

<a href="#" th:unless="${#lists.isEmpty(menu.submenu)}">
    <th:block th:text="#{${menu.title}}">Item</th:block>
    <span class="fa arrow" th:class="fa arrow"></span>
</a>

或者,使用内联文本:

<a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:inline="text" >
   [[#{${menu.title}}]]
   <span class="fa arrow" th:class="fa arrow"></span>
</a>