如何使用百里香將參數傳遞給模態？

我剛從一個項目中開始使用百里香，我對這項技術很陌生。這是確認要刪除的對象的簡單模式。因此，他們希望我在消息中添加要刪除的項目的名稱，而不是像以下這樣的通用消息：「您確定要刪除嗎？」他們想要：「你想刪除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>

在這一點上是我需要在有關正在刪除的作業項目的確認消息中添加更多信息。

已經嘗試了一些接近獲取參數，但沒有工作，所以我正在尋找更多的選擇。

謝謝！

來源

2017-08-11 Igor

：

下面

Javascript代碼應該可以正常工作了嗎？ –

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自定義您的模態內容。我可以看到，您正在使用引導程序作爲您的前端庫，因此您應該查看this example，瞭解如何完成此操作。你爲什麼在Grails項目使用Thymeleaf而不是GSP的

$('#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 + '?') 
})

來源

2017-08-13 11:46:58

如何使用百里香將參數傳遞給模態？

回答

相關問題