如何使用 thymeleaf 将参数传递给模态？

Question

我刚开始使用百里香叶的项目，而且我是这项技术的新手。 这是一个确认要删除的对象的简单模式。所以他们希望我在消息中添加我们要删除的项目的名称，而不是像“你确定要删除吗？”这样的通用消息。 他们想要：“你要删除 Item_Name 吗？” 所以我需要将此名称作为参数传递。

这就是我显示模态的代码：

<button id="btnDelete" value="delete" type="button" class="btn-link" data-toggle="modal" data-object-id="12345" data-object-name="NNN" th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'">

这就是我在模态 html 上的代码：

<form role="form" th:action="@{/deleteAssignment}"
      name="assignmentDeleteForm" id="assignmentDeleteForm" method="post">

    <div class="modal-header">
        <h4 class="modal-title" id="deleteWorkItemabel">Confirm Assignment Delete</h4>
    </div>

    <div class="modal-body">
        <div class="form-group">
            <p>Assignment will be deleted, are you sure you want to proceed?</p>
            <input type="hidden" id="deleteId" name="deleteId" value="nnnn"/>
        </div>
    </div>

    <div class="modal-footer">
        <button type="submit" id="btnDelConfirm" class="btn btn-primary">
            Yes
        </button>
        <button type="button" id="btnDelCancel" class="btn btn-default" data-dismiss="modal">
            No
        </button>
    </div>
</form>

此时我需要在确认消息中添加更多关于正在删除的分配项目的信息。

已经尝试了一些方法来获取参数，但没有成功，所以我正在寻找更多选项。

谢谢！

Answer 1

Thymeleaf 只是一个模板引擎，它可以获取您的模板并从中生成静态 html。因此，将动态值传递给您的模态是一项 javascript 工作（除非您为每个项目生成单独的模态，但这会很愚蠢）。

使用 thymeleaf，您必须在打开模式的按钮内生成包含所需项目名称的 data- 属性，仅此而已。你在th:attr中已经做过这样的事情了：

th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'"

上面的代码会在按钮内部生成data-object-id,data-object-name和data-target属性。我假设 data-object-name 是您想要使用的那个（但它看起来更像是一个 URL）。

现在您可以使用 javascript 自定义您的模态内容。我可以看到，您正在使用 bootstrap 作为您的前端库，因此您应该查看this example，以了解如何实现这一点。

下面的Javascript代码应该适合你：

$('#deleteAssignmentModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var objectName = button.data('object-name') // Extract info from data-object-name attribute

  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-body p').text('Do you want to delete ' + objectName + '?')
})

Answer 2

GitHub 上的示例项目，您可以对其进行克隆和测试。自述文件下的完整视频。

https://github.com/ibrahimkarayel/todoBoot/blob/master/src/main/resources/templates/home.html

<div class="modal modal-delete" th:id="modal-delete+${task.id }">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h3 id="delModalLabel">Delete Confirmation</h3>
            </div>
            <div class="modal-body">
                <p class="error-text"><strong>Are you sure you want to
                    delete this task ?</strong></p>
            </div>
            <div class="modal-footer">
                <button class="btn " data-dismiss="modal" aria-hidden="true">
                    Cancel
                </button>
                <a th:href="@{/task/delete/{id}(id=${task.id})}">
                    <span class="btn btn-danger" value="delete">Delete</span></a>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--end delete modal-->

<script>
    $('#modal-delete').on('show.bs.modal', function (e) {
        $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
        $('#modal-deleteHiddenId').val($(this).find('.btn-ok').attr('href'));
    });
</script>