在动态创建的 <div> 里面的 js 中动态传递参数

Question

我有这个动态创建 div 的脚本。我想将参数传递给控制器​​，并能够在单击预订按钮后可视化预订表格。 使用 thymeleaf 我会这样做 th:href="@{/hotels/{id}/booking-form(id=*{id})}" 但是我不确定如何在动态创建的内部使用 thymeleaf分区。

所以我尝试使用 javascript，但当然，它不起作用，所以如果有人告诉我我做错了什么以及如何获取 id 并将其传递给控制器​​，我将不胜感激。

                    <script type="text/javascript" th:inline="javascript">

                    document.getElementById('showAll').addEventListener('click', showAll);


                    function showAll() {
                        fetch('http://localhost:8080/accommodations')
                            .then(response => {
                                return response.json()
                            })
                            .then((data) => {
                                let output = `<h2> Search Results </h2>`;
                                data.forEach(function (hotel) {
                                    output += `
                                /some divs here/
                             
                                      <!-- Book Now button -->
                                    <div class="d-flex justify-content-end mt-1">
                                        <div class="btn btn-primary text-uppercase" id="bookingBtn" data-hotel-id="' + hotel.id + '" >Book Now</div>
                                    </div>
                                </div>`;
                                });
                                document.getElementById('output').innerHTML = output;
                            })
                    }

                    function booking() {
                        let hotelId = $(this).data('hotel-id')
                        fetch('http://localhost:8080/hotels/' + hotelId + '/booking-form', {
                            method: 'POST'
                        })
                    }

                    document.getElementById('bookingBtn').addEventListener('click', booking);


                </script>

Answer 1

当您使用template literals 创建字符串时，您可以通过${var} 这样的方式包含变量。所以在你的情况下你应该做data-hotel-id="${hotel.id}"

data.forEach(function(hotel) {
      output += `
         /some divs here/
                                 
         <!-- Book Now button -->
         <div class="d-flex justify-content-end mt-1">
           <div class="btn btn-primary text-uppercase" id="bookingBtn" data-hotel-id="${hotel.id}" >Book Now</div>
           </div>
         </div>`;
    });