Добавление повторяющегося HTML с JS и оценки выражений тимелист

Question

У меня есть веб-приложение, в которое я добавляю html, который повторяется много раз через js. Этот 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;

он просто добавляет строку, и тимелист, похоже, ничего не делает. Как я могу загрузить данные или убедиться, что строка выполняется так, как вы ее называете, чтобы я вернул значение? Нужно ли передавать бла в js и делать if в js?

Answer 1

Вы должны знать о различиях между серверным и клиентским программированием, или в этом случае шаблонным. Интерполяция шаблона Thymeleaf происходит на сервере (он же загрузочное приложение Java / Spring). По завершении он передает полученный HTML-код клиенту (он же браузер).

Любой код JavaScript, который у вас есть, выполняется в браузере, что означает, что выражения Thymeleaf не будут работать, так как вы больше ничего не делаете на сервере.

Вы можете решить это несколькими способами:

1. Вы можете попробовать сделать все на сервере, используя Spring и Thymeleaf. Это означает, что вам придется переписать ins_bla() на Java.

2. Вы можете использовать частичный HTML, который вы привязываете к другому контроллеру в Spring. Это означает, что вы в основном делаете что-то вроде этого:

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

3. Вместо того, чтобы отправлять 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);
   }
   

4. Если вы заранее знаете, что будет ${bla.start_week}, вы также можете отправить его в виде переменной JavaScript в исходном шаблоне Thymeleaf:

   <script type="text/javascript" th:inline="javascript">
       window.startWeek = /*[[${bla.start_week}]]*/ null;
   </script>
   

   Теперь вы можете использовать window.startWeek в вашей функции ins_bla().

Примечание : хотя я использую API выборки для вызова бэкэнда, вы также можете использовать любую другую библиотеку для выполнения вызова REST.