我需要一些想法来解决我的问题。我有以下html模板与表。它显示了5行,并在每行结束(在最后一个td)有一个按钮,它触发一个引导模式(弹出窗口)。我使用空格键{{#each}}
循环通过所有的游标,但问题是与模态。它只显示第一行的数据,每一行都记录相同的数据。这是因为模态的ID对于每个记录都是相同的(它是第一个,#subsPopup
)。我需要为每一行传递不同的ID,比如#subsPopup{{var}}
。知道我该怎么做吗?
<!-- 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">×</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>
您的订阅集合可能有_id
字段,因此您可以尝试输出{{_id}}
如果其他人遇到这个问题…
我解决这个问题的方法…(不确定这是否是最优雅的,但它确实适用于我)
下面是一个例子:
[流星模板文件- "coolmodal.html" -包含一个引导模态组件]
<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">×</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>
[流星客户端JS文件- "cool.js" -包含模板帮助器等]
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");
});