【问题标题】:Meteor - template helpers argument (spacebars)Meteor - 模板助手参数(空格键)
【发布时间】:2015-10-10 21:28:17
【问题描述】:

我需要一些关于如何解决我的问题的想法。我有以下带有表格的 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">&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>

【问题讨论】:

    标签: javascript node.js twitter-bootstrap meteor


    【解决方案1】:

    万一其他人遇到这个问题......

    我解决这个问题的方法......(不确定这是否是最优雅的,但它确实对我有用)

    这是一个例子:

    [Meteor 模板文件 - “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">&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 文件 - “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");
    });
    

    【讨论】:

      【解决方案2】:

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

      【讨论】:

      • 这很聪明:) 我试过了,效果很好,但我不想使用_id。还有其他建议吗?我可以为此做一个助手,但我在将它放入#each 循环时遇到了问题。它总是采用相同的值:/ 有没有办法将变量参数传递给 {{#each subsList var=[1, 2, 3 ...]}} 并且第一次运行需要 1,第一次运行需要 2第二次运行等?
      • 你可以试试{{@index}}{{@key}} 吗?它应该从某些版本的空格键开始可用,但我不确定究竟来自哪个版本
      • 感谢您重播亚历克斯。它不起作用,它会引发错误:/ 可能还没有实现......
      猜你喜欢
      • 2015-08-25
      • 1970-01-01
      • 2015-09-02
      • 2015-01-06
      • 2018-05-26
      • 2015-09-20
      • 2015-09-03
      • 2014-01-08
      • 1970-01-01
      相关资源
      最近更新 更多