在thymeleaf th:text template上调用javascript函数

Question

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

将javascript函数与th:onclick绑定是可能的。

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

我不知道这是否可能。

有什么建议吗？

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

file.getFileName()给出文件名。

<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>

Answer 2

不能将 javascript 函数与 th：text 一起使用

但

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

可用于百里香叶模板。