Thymeleaf和JavaScript

Question

我試圖用thymeleaf循環顯示html模板，例如：

<th:block th:each="ticket : ${tickets}">
    <div th:id="'ticket_' + ${ticket.ticketId}" th:include="${ticket.templateName}"></div>
    <div th:id="${ticket.ticketId}" th:if="${#strings.toString(ticket.ticketStatus)} == 'CANCELED'" th:include="'canceled'"></div>
</th:block>

If ticketStatus == 'CANCELED'我將html和js代碼包括在內，以警告父ID及其所有元素的ID不同。 但是JS警報具有相同的ID（第一個元素的ID）。 為什么這樣？ UPD：JavaScript部分：

    <script class='idForScript' th:inline="javascript">
/*<![CDATA[*/
    var id = $('.idForScript').parent().attr('id');
    alert(id);
    $('#ticket_'+id).find('.sortable').prepend('<div style="z-index: 232; background: grey; color:red; width:100%; height:100%; opacity:0.9; text-align:center; position: absolute;"><span style="position: absolute; margin-left: auto; margin-right: auto;left: 0; right: 0; top:35%;"><h1 style="font-weight:900;">YOUR TICKET WAS CANCELED</h1></span></div>');
    /*]]>*/
</script>

Answer 1

您可以通過輕松地跳過包含部分來完成此操作。 現在全部放在一個文件中。 您的腳本：

<script th:inline="javascript">
    /*<![CDATA[*/
    function yourFunction(id){
        alert(id);
        // Rest of your code.
    }
    /*]]>*/
</script>

在您的迭代中：

<div th:id="${ticket.ticketId}" th:if="${#strings.toString(ticket.ticketStatus)} == 'CANCELED'">
    <script th:inline="javascript">
        /*<![CDATA[*/ 
        $(function() {
            yourFunction([[${ticket.ticketId}]]);
         });
        /*]]>*/
    </script>
</div>