Meteor - template helpers argument (spacebars)

Question

I need some thoughts about how to solve my problem. I have the following html template with a table. It shows 5 rows and at the end of each row (in the last td) there is a button which triggers a bootstrap modal (popup window). I am using spacebars {{#each}} to loop through all the cursors, but the problem is with the modal. It only shows the data for the first row, for every row-record the same data. This is because the ID for the modal is the same for every record (it is the first one, #subsPopup ). I need somehow to pass it different ID for every row, like #subsPopup{{var}} . Any idea how could I do this?

<!-- subscribers table -->
<table class="table table-hover">
   <thead>
      <tr>
         <th>Firstname</th>
         <th>Lastname</th>
         <th>Email</th>
         <th>Created</th>
         <th>Modified</th>
         <th>Mailing lists</th>
      </tr>
   </thead>
   <tbody>
      {{#each subsList}}
      <tr>
         <td>{{firstName}}</td>
         <td>{{lastName}}</td>
         <td>{{email}}</td>
         <td>{{createdDate}}</td>
         <td>{{modifiedDate}}</td>
         <!-- Trigger the modal (popup window) with a button -->
         <td>
            <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#subsPopup">Show</button>
            <!-- Modal -->
            <div id="subsPopup" class="modal fade" role="dialog">
               <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Mailing List for <b>{{firstName}} {{lastName}}</b> ({{email}})</h4>
                     </div>
                     <div class="modal-body">
                        <p>{{mailLists}}</p>
                     </div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     </div>
                  </div>
               </div>
            </div>
         </td>
      </tr>
      {{/each}}
   </tbody>
</table>

Answer 1

您的订阅集合可能包含_id字段，因此您可以尝试输出{{_id}}

Answer 2

In case anyone else comes across this issue...

My method of solving this ... (not sure if this is the most elegant , but it did work for me )

Here is an example:

[Meteor Template File - "coolmodal.html" - containing a bootstrap modal component]

<template name="mymodal">

  <!-- This button we can use to trigger the modal to display-->
  <button class="btn btn-success btn-lg" type="button">

  <div class="modal fade" id="mycoolmodal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{modalDetails}}</h4>
        </div>
        <div class="modal-body">
          <p>Cool stuff I like to write here</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</template>

[Meteor Client JS file - "cool.js" - containing template helpers, etc]

Template.mymodal.events({

  'click .img-thumbnail'(event, instance) {
    event.preventDefault(); // Stops the page from attempting a reload.
    Session.set('myInfoForModal', this.my_data_you_want);
    $('#coolmodal').modal('show');
  }
});

Template.registerHelper('modalDetails',function(input){
  return Session.get("myInfoForModal");
});