Question

我有一个Web应用程序，在其中添加了通过js重复了很多次的html。该html包含一些th:each[...]等百里香叶表达式。当我将这些正确地写入html时，一切都很好，并且

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

评估为true，但是如果我通过js这样添加同一行：

<script>
ins_bla();
</script>

和

function ins_bla() {
text_part = "<div th:if=\"${bla.start_week == 1}\"></div>"
document.getElementById("blaElem").innerHTML = text_part;

它只是添加了一行，百里香叶似乎什么也没做。我该如何加载数据或确保该行得到执行，无论您如何称呼它，以便我取回值？我需要将bla传递给js并在js中执行if吗？

Answer 1

您必须了解server- and client-side编程之间的区别，或者在这种情况下为模板。 Thymeleaf模板插值发生在服务器（又名Java / Spring引导应用程序）上。完成后，它将结果HTML传递给客户端（又名浏览器）。

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

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

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

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

function ins_bla() {
  fetch('/call/to/server')
    .then(response => response.text())
    .then(html => document.getElementById('blaElem').innerHTML = html);
}

除了通过行发送HTML之外，您还可以编写@RestController，仅发送${bla.start_week}的值并在JavaScript中执行所有操作。然后，您可以在ins_bla()函数中执行以下操作：

function ins_bla() {
  fetch('/call/to/server')
    .then(response => response.json())
    .then(bla => bla.startWeek === 1 ? '<div></div>' : '')
    .then(html => document.getElementById('blaElem').innerHTML = html);
}

如果您事先知道${bla.start_week}是什么，那么您也可以在初始Thymeleaf模板中将其作为JavaScript变量发送：
```
<script type="text/javascript" th:inline="javascript">
    window.startWeek = /*[[${bla.start_week}]]*/ null;
</script>
```
现在，您可以在window.startWeek函数中使用ins_bla()。

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

用js添加重复的html并评估百里香叶表达

1 个答案: