时间戳

首页 > 解决方案 > 如何访问触发模式的按钮的按钮 ID，以在模式内部用作数组索引

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

问题描述

<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 的地方。

标签： buttonhandlebars.js

解决方案

我想使用 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}}

推荐阅读