Вызов функции javascript для тимелиста th: текстовый шаблон

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 находится в цикле.

Я хочу использовать функцию callBack с th: text.

Answer 1

Невозможно использовать функцию javascript с th: text

Но

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

можно использовать в шаблоне тимелист.

Answer 2

Так что для примера я предполагаю, что полное имя файла (отображается в браузере) выглядит так:

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