春天+百里香叶。 TH:ATTR 附加 html 标签

Question

我的初始 HTML 代码如下所示：

<select name="environmentSelect" id="environment" data-show-content="true" class="form-control">
    option>Environment</option>
    <option value="1"
         data-content="Test <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>"></option>
    <option value="2"
         data-content="Dev <span class='text-muted'>OFFLINE</span><i class='fas fa-power-off text-danger'></i>"></option>
    <option value="3"
         data-content="Prod <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>"></option>
 </select>

环境名称取自 DB。所以我想用 th:attr 填充它们

<select name="environmentSelect" id="environment" data-show-content="true"
                                class="form-control">
         <option>Environment</option>
         <option th:each="env : ${environments}" th:value="${env.name}"
              th:attr="data-content=${env.name} + '&lt;span class=\'text-muted\'>ONLINE&lt;/span&gt;&lt;i class=\'fas fa-power-off text-success\'&gt;&lt;/i&gt;'"
              th:text="${env.name}"
         ></option>
 </select>

问题是，当我在 chrome 中打开开发者控制台时，我看到了值和数据内容，但该选项保持为空。 你能告诉我，是否有可能将 html 标签添加到 th:attr 中，如果可以，如何

谢谢！

Answer 1

我建议不要在 Thymleaf 模式中构建如此复杂的字符串。最好在 DTO 类中为其引入特殊的 getter

public class Environment {

    // .....

    public getDataContent() {
       return HtmlUtils.htmlEscape(this.name + " <span class='text-muted'>ONLINE</span><i class='fas fa-power-off text-success'></i>", "UTF-8");
    }

    // .....
}

还有模板

<select name="environmentSelect" id="environment" data-show-content="true"
                            class="form-control">
     <option>Environment</option>
     <option th:each="env : ${environments}" th:value="${env.name}"
          th:attr="data-content=${env.dataContent}"
          th:text="${env.name}"
     ></option>