时间戳

首页 > 解决方案 > 如何在 freemarker 列表中显示自定义模式？

html - 如何在 freemarker 列表中显示自定义模式？

问题描述

我有一个 Ktor 服务器，我正在展示一些带有 freemarker 模板的网页。在一页上我有一张桌子。每行包含一个用户可以单击的按钮。如果用户单击按钮，则模式应该显示有关该表行的信息。

我可以显示一个模式，但它显示的数据始终来自第一行，无论我选择哪一行。如何让模式显示有关我单击的特定行的数据？我更喜欢不涉及 javascript 的答案。

                        <#list categories as category>
                            <tr>
                                <td>${category.displayName}</td>
                                <td>${category.pathName}</td>
                                <td>${category.priority}</td>
                                <td>${category.uuid}</td>
                                <td>${category.enabled?string('yes', 'no')}</td>
                                <td>
                                    <form method="post" action="/portal/home/categories">
                                        <a class="btn btn-primary btn-user btn-block" href="#" data-toggle="modal" data-target="#editCategoryModal">
                                            <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                            Edit
                                        </a>
<#--                                        <button type="submit" class="btn btn-primary btn-user btn-block" name="toggleEnabled" value="${category.uuid}">
                                            Toggle
                                        </button>-->
                                    </form>
                                </td>
                            </tr>
                            <div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">${category.displayName}</h5>
                                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                            <a class="btn btn-primary" href="login.html">Logout</a>
                                        </div>
                                    </div>
                                    </div>
                                 </div>
                             </#list>

根据建议更新代码：

                        <#list categories as category>
                            <tr>
                                <td>${category.displayName}</td>
                                <td>${category.pathName}</td>
                                <td>${category.priority}</td>
                                <td>${category.uuid}</td>
                                <td>${category.enabled?string('yes', 'no')}</td>
                            <td>
                                <a class="btn btn-primary btn-user btn-block" href="#" data-toggle="modal"
                                   data-target=".modal[data-id=${category.uuid}]">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    Edit
                                </a>
                            </td>
                            </tr>
                            <div class="modal fade" data-id="${category.uuid}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">${category.displayName}</h5>
                                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                            <a class="btn btn-primary" href="login.html">Logout</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </#list>

生成的 HTML 示例：

生成的模态

<div class="modal fade" data-id="6a8dbcf2-2580-4c81-b4c1-5f2f4762a6d0" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Issues </h5>
                                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                        </div>
                                        <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
                                        <div class="modal-footer">
                                            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                                            <a class="btn btn-primary" href="login.html">Logout</a>
                                        </div>
                                    </div>
                                </div>
                            </div>

生成的行

<tr>
                                <td>Issues </td>
                                <td>/issues</td>
                                <td>1</td>
                                <td>6a8dbcf2-2580-4c81-b4c1-5f2f4762a6d0</td>
                                <td>yes</td>
                                <td>
                                        <a class="btn btn-primary btn-user btn-block" href="#" data-toggle="modal" data-target=".modal[data-id=6a8dbcf2-2580-4c81-b4c1-5f2f4762a6d0]">
                                            <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                            Edit
                                        </a>
                                </td>
                            </tr>

标签： htmlfreemarkerktor

解决方案

对于列表中的每个项目，您都有一个具有相同 ID 的模态元素，因此浏览器总是会找到第一个。由于您uuid对每个类别都有，我建议使用它的数据属性值来明确识别模态。所以data-targetanchor的属性如下：

data-target=".modal[data-id=${category.uuid}]"

并且id模态的 被data-id属性替换：

data-id="${category.uuid}"

推荐阅读