Javascript 使用js添加重复的html并计算thymeleaf表达式

我有一个web应用程序，我通过js添加了多次重复的html。此html包含一些thymeleaf表达式，如

th:each[…]

和其他表达式。 当我把这些写进html时，一切都很好

<div th:if="${bla.start_week == 1}"></div>

计算结果为true，但如果我通过js添加相同的行，如下所示：

<script>
ins_bla();
</script>

ins_bla（）；

及

函数ins_bla（）{ text_part=“” document.getElementById（“blaElem”）.innerHTML=text\u part； 它只是添加了一行，而thymeleaf似乎没有做任何事情。我如何加载数据，或者确保该行被执行，不管你怎么调用它，这样我就可以得到一个值？

---

我需要将bla传递给js并在js中执行if吗？

您必须了解编程之间的差异，或者在本例中使用模板。Thymeleaf模板插值发生在服务器上（也称Java/Spring启动应用程序）。完成后，它会将结果HTML传递给客户端（又名浏览器）

任何JavaScript代码都是在浏览器中执行的，这意味着Thymeleaf表达式将无法工作，因为您不再在服务器上执行任何操作

您可以通过以下几种方式解决此问题：

您可以尝试使用Spring和Thymeleaf在服务器上执行所有操作。这意味着您必须用Java重写

ins_bla（）

您可以在Spring中使用绑定到另一个控制器的部分HTML。这意味着您基本上可以执行以下操作：

<script>
ins_bla();
</script>

函数ins_bla（）{ 获取（'/call/to/server'） .then（response=>response.text（）） .then（html=>document.getElementById（'blaElem'）.innerHTML=html）； }

您也可以编写一个

@RestController

，它只发送

${bla.start_week}

的值，并在JavaScript中执行所有操作。在

ins_bla（）

函数中，您可以执行以下操作：

函数ins_bla（）{ 获取（'/call/to/server'） .then（response=>response.json（）） 。然后（bla=>bla.startWeek===1？“”：“”） .then（html=>document.getElementById（'blaElem'）.innerHTML=html）； }

如果您事先知道什么是

${bla.start_week}

，您也可以将其作为初始Thymeleaf模板中的JavaScript变量发送：

window.startWeek=/*[${bla.start_week}]]*/null；

现在，您可以在

ins_bla（）

函数中使用

window.startWeek

注意：当我使用fetch API对后端进行调用时，您也可以使用任何其他库进行REST调用

---

您必须了解编程之间的差异，或者在本例中为模板。Thymeleaf模板插值发生在服务器上（即Java/Spring启动应用程序）。完成后，它将结果HTML传递给客户端（即浏览器）

任何JavaScript代码都是在浏览器中执行的，这意味着Thymeleaf表达式将无法工作，因为您不再在服务器上执行任何操作

您可以通过以下几种方式解决此问题：

您可以尝试使用Spring和Thymeleaf在服务器上执行所有操作。这意味着您必须用Java重写

ins_bla（）

您可以在Spring中使用绑定到另一个控制器的部分HTML。这意味着您基本上可以执行以下操作：

<script>
ins_bla();
</script>

函数ins_bla（）{ 获取（'/call/to/server'） .then（response=>response.text（）） .then（html=>document.getElementById（'blaElem'）.innerHTML=html）； }

您也可以编写一个

@RestController

，它只发送

${bla.start_week}

的值，并在JavaScript中执行所有操作。在

ins_bla（）

函数中，您可以执行以下操作：

函数ins_bla（）{ 获取（'/call/to/server'） .then（response=>response.json（）） 。然后（bla=>bla.startWeek===1？“”：“”） .then（html=>document.getElementById（'blaElem'）.innerHTML=html）； }

如果您事先知道什么是

${bla.start_week}

，您也可以将其作为初始Thymeleaf模板中的JavaScript变量发送：

window.startWeek=/*[${bla.start_week}]]*/null；

现在，您可以在

ins_bla（）

函数中使用

window.startWeek

注意：当我使用fetch API对后端进行调用时，您也可以使用任何其他库进行REST调用

---

我采用了第四种方法，因为它在我看来是最快的，谢谢你的帮助！@AlexanderHurtig没问题。是的，如果事先知道

bla.start_week

，第四种解决方案可能是最快的。其他解决方案更适合动态数据（例如来自数据库的最新数据）或复杂数据（整个对象结构）。我采用了第四种方法，因为它在我看来是最快的，谢谢你的帮助！@AlexanderHurtig没问题。是的，如果事先知道

bla.start_week

，第四种解决方案可能是最快的。其他解决方案更适合动态数据（例如来自数据库的最新数据）或复杂数据（整个对象结构）。