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

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(点击按钮时只需向input type"number"输入+1(

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

当然是的，这是可能的。

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

在Javascript中，(CSP"script-src‘unsafe-inline’…"或<script th:inline="javascript" nonce="" ...>是必需的，因为对于所有XSS注意事项，编写JS inline是一种糟糕的方式。感谢OWASP(，您可以尝试编写：let productCategory = /*[[${productCategory}]]*/ '';

在带有ES6+模块(带有webpack或任何其他解决方案(的Javascript中，您可以检查Web应用程序的端点(使用带有polyfill的Promise功能(，该端点将在表单输入元素中加载数据。让你的行动像往常一样。玩得高兴