如何将 JS 函数中的 HTML 输入 Thymeleaf th:text？

Question

我想根据对象方法的返回值显示评级。 JS 函数 - 返回一个包含基于参数的星星数量的 html。 参数 - 最多 5 位的数字。我通过调用 employee.getUser().getAvgGrade() 得到它。

这是我的一张桌子

            <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Rating</th>
                <th>Schedule</th>
            </tr>
            </thead>
<tbody>
    <tr th:each="employee:${employees}">

        <td th:text="${employee.getUser().getFullName()}"></td>
        <td th:text="${employee.getUser().getAvgGrade()}"></td>
        <td th:text="${employee.getTimeBegin() + ' - ' + employee.getTimeEnd()}"></td>

    </tr>
    </tbody>
        </table>

这是一个返回 HTML 的 JS 函数

    function star(rate) {
    var starHTML = '';
    var rate = parseInt(rate);
    var increment = 0;
    var max = 5;

    while(increment < rate) {
        starHTML += '<i class="material-icons orange">grade</i>';
        increment++;
    }

    while(max > rate) {
        starHTML += '<i class="material-icons gray">grade</i>';
        max--;
    }
    return starHTML;
};

星星的 CSS

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

我想用 getAvgGrade() （第二个 th:text ）中的整数调用这个函数，并将它返回的 html 放置为 th:text （因此单元格包含星星）。

Answer 1

您可以使用 Thymeleaf 来管理星星的生成，而不是使用 JavaScript，从而简化这一过程。

这是这种方法：

首先，一些 Java 测试数据（您的数据的简化版本，仅用于此演示）：

List<UserRating> userRatings = new ArrayList<>();
userRatings.add(new UserRating("Abel", 2));
userRatings.add(new UserRating("Baker", 3));
userRatings.add(new UserRating("Charlie", 4));

因此，我们有 3 个用户，等级分别为 2、3 和 4。

Thymeleaf 模板如下：

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Avg Grade</th>
            <th>Stars</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="user : ${users}">
            <td th:text="${user.name}"></td>
            <td th:text="${user.grade}"></td>
            <td>
                <th:block th:each="star,iterStat : ${#numbers.sequence(1,5)}">
                    <span th:if="${user.grade} >= ${iterStat.count}" 
                          class="material-icons" 
                          style="color: orange;">grade</span>
                    <span th:if="${user.grade} < ${iterStat.count}" 
                          class="material-icons" 
                          style="color: grey;">grade</span>
                </th:block>
            </td>
        </tr>
    </tbody>
</table>

将测试数据应用到模板的结果是这样的：

笔记

这种方法不需要任何 JavaScript。

我假设平均成绩是整数，但这也适用于十进制值。

为了建立 5 颗星，我使用了从 1 到 5 的预定义序列：

${#numbers.sequence(1,5)}

我使用一个名为iterStat的迭代状态变量来跟踪这个由 5 个整数组成的序列的进度。

我将这个iterStat.count值（迭代中的当前位置）与平均成绩值进行比较。 我用它来确定星星应该是橙色还是灰色。

th:block元素是一种特殊的 Thymeleaf 元素。 在某些迭代情况下可以方便地使用。 更多细节在这里。

---

您当然可以通过其他方式实现这一点 - 例如，通过在绘制表格后调用 JavaScript 函数 - 但这将涉及更多 JavaScript 代码 - 您的函数，以及在 JavaScript 中迭代表值的额外代码。

我会推荐上述方法。 但我理解，如果这可能不是您想要的，或者由于某种原因它可能不适合您的整体方法。