将行添加到百科全书填充的表中

Question

当我在百里香的一个表中添加一个新行时，我发现了几个问题。

1. 我无法指定任何stat.index
2. 使用javascript
添加行时，不会显示th：xxx标记

这是我的HTML +百里香码：

<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（或百里香的任何其他更好的解决方案）正确添加新行？

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)