在thymeleaf上调用javascript函数：文本模板

Question

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

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

绑定javascript函数与th:text是可能的吗？

我不知道是否可能。

有什么建议吗？

Filename = Abcdefghijklmnopqrstuvwxyz.jpeg

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

file.getFileName()给出了fileName。

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

span标签在循环中。

我想用th：text来使用callBack函数。

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>

Answer 2

不能使用带有th：text的javascript函数

但

<script th:inline="javascript"> 
    var shortFileName = callBack([[file.getFileName()]]);
    $("#filename").text(shortFileName);
</script>

可用于百里叶模板。