在thymeleaf th：text模板上调用javascript函数

Question

我试图将返回的javascript函数的文本值附加到thymeleaf th：text模板。

可以用th:onclick绑定javascript函数。

可以将javascript函数与th:text绑定吗？

Filename = Abcdefghijklmnopqrstuvwxyz.jpeg

function callBack (fiuleName) {
    // some logic
    return Abcde….jpeg
};

<span th:id="filename" th:text=“callBack(${file.getFileName()})”></span>

span标记在循环中。

我想使用回调函数与th：text。

Answer 1

<div class="filename">FileName.full.file</div>

<div class="filename">FileName.file</div>

// get a collection of all filename items in the DOM
const filenames = document.querySelectorAll('.filename');

// to make sure the elements are parsed, add the functionality to DOMContentLoaded
// which guarantees that the DOM is complete and all elements are accessible to JS
document.addEventListener('DOMContentLoaded', () => {
  for (const filename of [...filenames]) {
    filename.textContent = filename.textContent.replace('.full', '');
    filename.classList.add('transformed');
  }
})

/* this will avoid the flash of non-transformed text to be visible before JS processes it */

.filename {
  visibility: hidden;
}

.filename.transformed {
  visibility: visible;
}

<div class="filename">FileName.full.file</div>