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

无法将JavaScript函数与th：text一起使用

但是

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

可以在百里香模板中使用。

在百里香th：text模板上调用javascript函数

2 个答案: