如何访问触发模态的按钮的按钮 ID，以便在模态内部用作数组索引

Question

<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{{#each apps}}
<tr class="table-light">
<td>{{this.owner.name}}</td>
<td>{{this.owner.email}}</td>
<td>{{this.status}}</td>
<td><button id="{{@index}}"  name="button1" type="button" class="btn btn-primary" data-toggle="modal" 
data-target="#myModal">View Application</button>
</td>
</tr>
{{/each}}
</tbody>
</table>

<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Application View</h4>
</div>
<div class="modal-body" >
<input type="hidden" name="id" id="id">
<h3>Name:</h3> {{apps.[???].owner.email}}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>

我正在使用 hbs 来查看表格。 在每一行，我都有一个按钮，用于触发模态视图应用程序按钮。我希望将按钮的 id 用作模态中的数组索引以显示数组数据。如何在 hbs 中执行此操作？???是我想分配 id 的地方。

Answer 1

我想使用JQuery：

您的按钮：

<button id="{{@index}}" name="button1" type="button" class="btn btn-primary modal-btn" data-index="{{@index}}">
View Application
</button>

.JS：

$(document).on("click", ".modal-btn", function(){
var index = $(this).data().index;
var modalTemplate = Handlebars.compile($("myModalTemplate").innerHTML());
$("body").append(modalTemplate({apps: apps, index: index});         
$("#myModal").modal("show");
});

我的模态模板：

<h3>Name:</h3> {{apps.apps.index.owner.email}}