2017-02-27 47 views
0

我有一个等待列表类型的应用程序,我正在创建。我现在拥有它,我的桌子将填充集合。我希望能够按下按钮,并将表格中的那一行移动到表格的底部。这是表格填充的位置。如何移动流星中的物品?

<tbody> 
          {{#each student}} 
           <tr class="accordion-toggle mainRow"> <!--mainRow if want whole row to change green--> 
            <td>{{> expandButton}}</td> 
            <td>{{Name}}</td> 
            <td>{{PhoneNumber}}</td> 
            <td>{{VipID}}</td> 
            <td class="selectionChange">{{> buttonSelections}}</td> 
           </tr> 
           <tr> 
            <td colspan="12" class="hiddenRow"> 
             <div class="accordian-body collapse" id="{{this._id}}"> 
              <table class="table table-striped"> 
               <thead id="innter-table"> 
                <tr class="info"> 
                 <th id="inner-heading">Reason for Visit</th> 
                 <th id="inner-heading">Current Major</th> 
                 <th id="inner-heading">Intended Major</th> 
                 <th id="inner-heading">Comments</th> 
                </tr> 
               </thead> 
               <tbody> 
                <tr> 
                 <td>{{ReasonForVisit}}</td> 
                 <td>{{CurrentMajor}}</td> 
                 <td>{{IntendedMajor}}</td> 
                 <td>{{Comments}}</td> 
                </tr> 
               </tbody> 
              </table> 
             </div> 
            </td> 
           </tr> 
           {{> autoformModals}} 
          {{/each}} 
         </tbody> 

这里是按钮的模板:

<template name="buttonSelections"> 
...//other code for different buttons 

<button class="btn btn-default btn-sm"> 
    <span class="glyphicon glyphicon-arrow-down"></span> 
</button> 

... //other code for different buttons 
</template> 

我知道我需要一些类型的事件的按钮。但我不知道如何去获取集合中的项目以便在集合中移动,以便当它再次填充表格时,它将移动到底部。

我该如何获得集合重新排序,以便选定的项目将移动到集合的末尾?

回答

1

您不会“移动”收藏中的项目,您要做的是在客户端上对收藏进行排序,以显示您的需求。我没有看到相关的帮手,但它会全部是这个样子:

<template name="Students"> 
    {{#each student in students}} 
     {{student.name}} 
    {{/each}} 
</template> 

在JS,这是相当标准的东西:订阅在onCreated()的集合,然后辅助排序集合你想要什么。在这里,我正在组建一个字段,“waitListedTime”,通过它收集排序。您的按钮按下可以为选定的学生添加时间戳,助手会反应性地运行,您的学生列表将在屏幕上更新。

Template.Students.onCreated(function() { 
    this.subscribe('students'); 
}); 

Template.Students.helpers({ 
    students() { 
     return Students.find({}, {sort: {waitListedTime: 1}}); 
    } 
});