是否可以使用 thymeleaf 变量在 JS 中对它们求和？

Question

这是我的表格（很多菜，每道菜都有一个输入编号（要点菜的数量）。

问题是我想在订单完成之前显示订单价格，为此我需要以某种方式对 ${dish.price} 的输入求和，但如何才能做到这一点？

    <form action="#" th:action="@{/menu}" th:object="${order}" method="post">

    <div th:each="dish : ${dishList}">
                    <div>
                        <h4 th:inline="text">[[${dish.name}]]<span class="price" th:text="${dish.price}">45</span></h4>
                        <p th:text="${dish.category}">DRINKS</p>
                        <p th:text="${dish.description}">
                            Aperiam tempore sit,perferendis numquam repudiandae porro
                            voluptate dicta saepe facilis.
                        </p>
                        <div>
                            <button class="decrement" type="button" onclick="stepperDecrement(this)">-</button>
                            <input
                                    th:value="0"
                                    th:name="${'dishIdQuantityMap[' + dish.id + ']'}"
                                    type="number"
                                    min="0"
                                    max="100"
                                    step="1"
                            />
                            <button class="increment" type="button" onclick="stepperIncrement(this)">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" value="Submit">Confirm order</button>

</form>

JS（单击按钮时只需输入 +1 到 input type"number"）

    function stepperDecrement(btn){
    const inputEl = btn.nextElementSibling;
    const calcStep =inputEl.step * -1;
    const newValue = parseInt(inputEl.value) + calcStep;
    if(newValue >= inputEl.min && newValue <= inputEl.max){
        inputEl.value = newValue;
    }
}
function stepperIncrement(btn){
    const inputEl = btn.previousElementSibling;
    const calcStep = inputEl.step * 1;
    const newValue = parseInt(inputEl.value) + calcStep;
    if(newValue >= inputEl.min && newValue <= inputEl.max){
        inputEl.value = newValue;
    }
}

Answer 1

当然可以，有可能。

要在您的 thymeleaf 模板中获取服务器数据，您可以通过多种方式进行，这取决于您需要该数据的上下文。

Inside Javascript, (CSP "script-src 'unsafe-inline' ..." 或 <script th:inline="javascript" nonce="" ...> 是必需的，因为就所有 XSS 警告而言，编写 JS 内联是一种糟糕的方式。谢谢 OWASP），你可以尝试写：let productCategory = /*[[${productCategory}]]*/ '';

在 Javascript 中使用 ES6+ 模块（使用 webpack 或任何其他解决方案），您可以检查您的 web 应用程序的端点（使用带有 polyfill 的 Promise 功能），它将在表单输入元素中加载数据。并照常进行操作。玩得开心。

是否可以使用 thymeleaf 变量在 JS 中对它们求和？

Is it possible to use thymeleaf variables to sum them in JS?

java

spring

thymeleaf