Как получить доступ к идентификатору кнопки кнопки, вызвавшей модальный режим, для использования внутри модального индекса в качестве индекса массива - PullRequest
Новая
       8

Как получить доступ к идентификатору кнопки кнопки, вызвавшей модальный режим, для использования внутри модального индекса в качестве индекса массива

0 голосов
/ 19 октября 2019 
<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 для просмотра таблицы. в каждой строке у меня есть кнопка, которая вызывает модальное представление Application Button. Я хочу, чтобы идентификатор кнопки использовался в качестве индекса массива в модальном режиме для отображения данных массива. Как я могу сделать это в HBS? ??? - это место, где я хочу назначить идентификатор.

1 Ответ

0 голосов
/ 21 октября 2019

Я полагаю, используя 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");
});

MyModalTemplate: 

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