流星 - 模板助手參數（spacebars）

我需要一些關於如何解決我的問題的想法。我有一個表格下面的html模板。它顯示5行，並在每行的末尾（最後一個td）有一個觸發引導模式（彈出窗口）的按鈕。我正在使用空間條{{#each}}來遍歷所有遊標，但問題在於模態。它只顯示第一行的數據，對於每一行記錄相同的數據。這是因爲模式的ID對於每個記錄都是相同的（這是第一個，#subsPopup）。我需要以某種方式爲每一行傳遞不同的ID，如#subsPopup{{var}}。任何想法我怎麼能這樣做？流星 - 模板助手參數（spacebars）

<!-- 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>

來源

2015-07-21 Salem Adžović

您訂閱的集合可能有_id領域，所以你可以嘗試輸出{{_id}}

來源

2015-07-21 12:50:34

這是非常聰明的:) 我試過了，它工作正常，但我不想使用_id。還有其他建議嗎？我可以幫助這個，但我有問題把它放到#each循環中。它始終採用相同的值：/ 有沒有辦法將變量參數傳遞給{{#each subsList var = [1，2，3 ...]}}，第一次運行需要1次，第二次運行等？ –

你可以試試''{{@index}}''或''{{@key}}'''？它應該從一些版本的SpaceBars開始可用，但我不確定哪一個正確 –

感謝您的重播Alex。它不工作，它會拋出一個錯誤：/ 可能還沒有實現... –

萬一別人遇到這個問題......

我解決這個的方法...（不知道這是最優雅的，但它確實爲我工作）

下面是一個例子：

[流星模板文件 - 「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>

[流星客戶端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"); 
});

來源

2017-02-28 19:27:26 jremi

流星 - 模板助手參數（spacebars）

回答

相關問題