javascript - 如何将单独的 JS 文件中的值传递给 Thymeleaf

Question

我正在使用 Bootstrap Full 日历并在尝试从 Modal 弹出窗口中删除事件时遇到一些问题。日历呈现在单独的 .js 文件中，其中包含我需要的所有信息，包括我要删除的事件的 ID。我的问题是，我不知道如何在我的 html -file 中使用此信息，以便我可以使 remove -button 起作用。这是我的一些代码：

删除按钮，它是<div class="modal-dialog" role="document">:

<button name="avId" id="avId" th:onclick="'javascript:deleteAvailability(' + ${avId} + ')'"
    class="btn btn-danger text-white uil-trash-alt">Delete
</button>

在同一个 html 文件中，我有这个deleteAvailability功能（如果给定 id，路由/api/calendar处理从 db 中删除可用性）：

<script>
    function deleteAvailability(obj) {
            fetch("/api/calendar?id=" + obj)
            .then(() => location.reload())
    }
</script>

在我的 cal.js 文件中，我有这个：

eventClick: function(info) {
      var eventObj = info.event;
      const id = eventObj.id;

 $('.modal').modal('show');
 $('.modal').find('#avId').val(id);

}

正如您可能看到的，我尝试avId在我的 cal.js -file 中设置值并将其用作我的 -function 的参数deleteAvailability。然而，这不起作用，并会感谢任何建议。

标签： javascriptjquerybootstrap-4thymeleaf