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

Question

我刚开始一个使用 thymeleaf 的项目，我是这项技术的新手。这是确认要删除的对象的简单模式。所以他们希望我在消息中添加我们要删除的项目的名称，而不是像这样的通用消息:“你确定要删除吗？”他们想:“你想删除 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 + '?')
})