向由 thymeleaf 填充的表添加行

Question

当我将新行添加到由 thymeleaf 填充的表中时，我发现了几个问题。

1. 我无法分配任何 stat.index
2. 使用 javascript 添加行时，th:xxx 标记不显示

这是我的 HTML+thymeleaf 代码：

<table id="table">
    <tbody>
        <tr id="tableBody" th:each="branch, stat : *{branchesVO}">
            <td>
                <input type="number" th:value="*{id}" th:field="*{branch[__${stat.index}__].id}" hidden="true" />
                <div>
                    <div>
                        <div class="form-group col-md-6">
                            <label th:text="#{customerInfo}"/>
                            <input class="form-control" type="text" name="customerInfo" th:value="*{customerInfo}" th:placeholder="#{customerInfo}" th:field="*{branches[__${stat.index}__].customerInfo}"/>
                        </div>
                        <div class="form-group col-md-6">
                            <label th:text="#{address}" />
                            <input class="form-control" type="text" name="address" th:value="*{address}" th:placeholder="#{address}" th:field="*{branches[__${stat.index}__].address}"
                                th:required="required" />
                        </div>
                    </div>

                    <div>
                        <div class="form-group col-md-4">
                            <label th:text="#{telephone}" />
                            <input class="form-control" type="text" name="telephone" th:value="*{telephone}" th:placeholder="#{telephone}" th:field="*{branches[__${stat.index}__].telephone}"/>
                        </div>
                        <div class="form-group col-md-4">
                            <label th:text="#{mobilePhone}" />
                            <input class="form-control" type="text" name="mobile" th:value="*{cellPhone}" th:placeholder="#{mobilePhone}" th:field="*{branches[__${stat.index}__].cellPhone}"/>
                        </div>
                        <div class="form-group col-md-4">
                            <label th:text="#{contact}" />
                            <input class="form-control" type="text" name="contact" th:value="*{contact}" th:placeholder="#{contact}" th:field="*{branches[__${stat.index}__].contact}"/>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<div>
    <hr/>
    <button type="button" class="btn btn-warning" th:text="#{addBranch}" onclick="addBranch(document.getElementById('table'))"/>
</div>

这是我的 js 代码：

function addBranch(table) {

    var tableRow = "<tr>" +
        "<td>" +
        "<input type='number' th:value='*{id}' th:field='*{branch[__${stat.index}__].id}' hidden='true' />" +
        "<div>" +
        "<div>" +
        "<div class='form-group col-md-6'>" +
        "<label th:text='#{customerInfo}'/>" +
        "<input class='form-control' type='text' name='customerInfo' th:value='*{customerInfo}' th:placeholder='#{customerInfo}' th:field='*{branches[__${stat.index}__].customerInfo}'/>" +
        "</div>" +
        "<div class='form-group col-md-6'>" +
        "<label th:text='#{address}'/>" +
        "<input class='form-control' type='text' name='address' th:value='*{address}' th:placeholder='#{address}' th:field='*{branches[__${stat.index}__].address}' th:required='required'/></div></div>" +
        "<div><div class='form-group col-md-4'>" +
        "<label th:text='#{telephone}'/>" +
        "<input class='form-control' type='text' name='telephone' th:value='*{telephone}' th:placeholder='#{telephone}' th:field='*{branches[__${stat.index}__].telephone}'/>" +
        "</div><div class='form-group col-md-4'>" +
        "<label th:text='#{mobilePhone}'/>" +
        "<input class='form-control' type='text' name='mobile' th:value='*{cellPhone}' th:placeholder='#{mobilePhone}' th:field='*{branches[__${stat.index}__].cellPhone}'/>" +
        "</div>" +
        "<div class='form-group col-md-4'>" +
        "<label th:text='#{contact}'/>" +
        "<input class='form-control' type='text' name='contact' th:value='*{contact}' th:placeholder='#{contact}' th:field='*{branches[__${stat.index}__].contact}'/>" +
        "</div></div></div></td></tr>";

    var row = table.insertRow(table.rows.length);
    row.innerHTML = tableRow;
}

有什么方法可以让这个 js（或任何其他更好的 thymeleaf 解决方案）正确添加新行？

Answer 1

Thymeleaf 是一个服务器 端模板引擎。 这意味着 th:value 属性解析发生在服务器上。

另一端的javascript代码在cient端运行。

如果您想在客户端向表中添加行，则必须使用一些技巧：

<script th:inline="javascript" type="text/javascript">
    /*<![CDATA[*/
    // OK
    var username = /*[[${user.name}]]*/ 'Test User';
    console.log(username);
    // MAY CAUSE TROUBLE
    var branch_id = 1;
    var url = /*[[@{/branches/}]]*/ '' + branch_id;
    console.log(url);
    /*]]>*/
</script>

注意几点：

1. 添加了th:inline="javascript" 特殊属性，告诉Thymeleaf 引擎内联标签的内容。
2. 内容已经被/*<![CDATA[*/和/*]]>*/包裹（我认为这部分是XML解析器所必需的）
3. Thymeleaf 语法​​（${}、*{}、@{}、#{}）应该用/*[[ 和]]*/ 包裹。
4. 您可以（并且应该）为 Js 变量提供一个默认静态值。
5. 不应将 JavaScript 操作（如字符串连接）与内联混合使用，否则可能会出现一些奇怪的行为。

---

阅读更多：

What is the Syntax to get Thymeleaf ${pageContext.request.contextPath}

Tutorial: Using Thymeleaf - 12.2 Script inlining (JavaScript and Dart)