Question

我刚开始参与一个我们使用百里香的项目，而且我对这项技术不熟悉。它是确认要删除的对象的简单模式。因此，他们希望我添加我们在邮件中删除的项目的名称，而不是像以下常规邮件：＆＃34;您确定要删除吗？＆＃34; 他们想要：＆＃34;你想要删除Item_Name吗？＆＃34; 所以我需要将此名称作为参数传递。

我的代码显示模态：

<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'">

这就是我对modal 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工作（除非你为每个项目生成单独的模态，但这将是愚蠢的。）

使用百万美元你必须在按钮内生成一个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>

如何使用百里香叶将参数传递给模态？

2 个答案: