如何使用 Thymeleaf 和 JQuery 绑定动态子列表？

Question

我是一个完全的新手，我真的希望你能帮助我！

我有两个实体：配方和产品。配方对象包含产品列表，大小这是由用户“控制”的——它根据用户想要的产品数量而变化包括。

这是我的配方实体：

@Entity
@Table(name = "recipes")
public class RecipeEntity extends BaseEntity {

    private String name;
    private String shortDescription;
    private String cookingInstructions;
    private Integer cookingTime;
    private Integer portions;
    private List<ProductEntity> products;
    
    //GETTERS, SETTERS

这是产品实体：

@Entity
@Table(name = "products")
public class ProductEntity extends BaseEntity {

    private String name;
    private Double quantity;
    private RecipeEntity recipe;
    
    //GETTERS, SETTERS

这是 Thymeleaf 模板：

 <h4>Products</h4>

 <div class="products" th:each="product, iterStat : *{products}">
   <div class="product row">


     <div class="col-lg-6 mb-3">
       Name
       <input th:field="*{products[__${iterStat.index}__].name}" id="product" class="form-control form-control-lg" />
     </div>

     <div class="col-lg-6 mb-3">
       Quantity(grams)
       <input th:field="*{products[__${iterStat.index}__].quantity}" type="number" id="quantity" step="0.1" min="0" class="form-control form-control-lg" />
     </div>

   </div>
 </div>

 <button type="button" class="add-product btn btn-outline-secondary col-lg-12">+ Add another
   product
 </button>

最后我们有了 JQuery 动态添加产品行的函数：

$(document).ready(function () {
    $('.add-product').click(function () {
        let newRow = jQuery('<div class="product row">' +
            ' <div class="col-lg-6 mb-3">' +
            ' Name' +
            ' <input type="text" class="form-control form-control-lg"/>' +
            ' </div>' +
            ' <div class="col-lg-6 mb-3">' +
            '  Quantity(grams)' +
            ' <input type="number" step="0.1" min="0"' +
            ' class="form-control form-control-lg"/>' +
            '</div>' +
            '</div>');

        $('.products').append(newRow)

现在的问题是我想根据 post 请求获取所有产品以及配方，并且将它们一起保存到数据库中。 JQuery 函数工作正常，它确实附加了产品行，然而，当我 post 向我的 RecipeController 发送信息时，产品列表是空的。

如果有人能告诉我正确的方向，我将非常感激，因为我完全迷失在这个方向上！提前谢谢大家！

Answer 1

我已经通过更多的研究设法解决了我自己的问题，所以我将post这里的答案，以防将来有人觉得它有用。

发现这个 post 真的很有帮助 -How to get dynamic input box data using Thymeleaf?

thymeleaf 模板并不是我最初认为的问题。我编写的 JQuery 函数存在问题。

这是有效的 JQuery 函数，它不仅在客户端附加行，而且还将父对象 Recipe 与子列表 Products 一起传输到我的 RecipeController。

$(document).ready(function () {
    let max_fields = 30;
    let index = 1;


    $('.add-product').click(function () {

        if (index < max_fields) {
            let newRow = jQuery('<div class="product row">' +
                ' <div class="col-lg-6 mb-3">' +
                ' Name' +
                ' <input name="products[' + index + '].name" type="text" class="form-control form-control-lg"/>' +
                ' </div>' +
                ' <div class="col-lg-6 mb-3">' +
                '  Quantity(grams)\n' +
                ' <input name="products[' + index + '].quantity" type="number" step="0.1" min="0"' +
                ' class="form-control form-control-lg"/>' +
                '</div>' +
                '</div>');

            index++;

            $('.products').append(newRow)
        }

    });
});

我要注意的一件事是，包含名称和数量的标签可能会更好，但即使没有它们，代码也能按预期工作！

如何使用 Thymeleaf 和 JQuery 绑定动态子列表？

How to bind a dynamic child list using Thymeleaf and JQuery?

jquery

spring

thymeleaf