如何在流星中移动集合中的项目?
How to move item in collection in meteor?
我正在创建一个等待列表类型的应用程序。我目前拥有它,我的 table 将填充该集合。我希望能够按下一个按钮,然后将 table 中的那一行移动到 table 的底部。这是填充 table 的地方。
<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>
我知道按钮需要某种类型的事件。但我不确定如何让集合中的项目在集合中移动,以便当它再次填充 table 时,它将移动到底部。
如何让集合自行重新排序,以便所选项目移动到集合的末尾?
您不会 "move" 您的 collection 中的项目,您要做的是在客户端上对 collection 进行排序,以便它显示您想要的方式。我没有看到相关的助手,但它看起来像这样:
<template name="Students">
{{#each student in students}}
{{student.name}}
{{/each}}
</template>
在 JS 中,它是非常标准的东西:在 onCreated() 中订阅 collection,然后助手按您想要的方式对 collection 进行排序。在这里,我正在创建一个字段 "waitListedTime",collection 将按该字段进行排序。您按下按钮可以为所选学生添加时间戳,助手会 运行 反应,您的学生列表会在屏幕上更新。
Template.Students.onCreated(function() {
this.subscribe('students');
});
Template.Students.helpers({
students() {
return Students.find({}, {sort: {waitListedTime: 1}});
}
});
我正在创建一个等待列表类型的应用程序。我目前拥有它,我的 table 将填充该集合。我希望能够按下一个按钮,然后将 table 中的那一行移动到 table 的底部。这是填充 table 的地方。
<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>
我知道按钮需要某种类型的事件。但我不确定如何让集合中的项目在集合中移动,以便当它再次填充 table 时,它将移动到底部。
如何让集合自行重新排序,以便所选项目移动到集合的末尾?
您不会 "move" 您的 collection 中的项目,您要做的是在客户端上对 collection 进行排序,以便它显示您想要的方式。我没有看到相关的助手,但它看起来像这样:
<template name="Students">
{{#each student in students}}
{{student.name}}
{{/each}}
</template>
在 JS 中,它是非常标准的东西:在 onCreated() 中订阅 collection,然后助手按您想要的方式对 collection 进行排序。在这里,我正在创建一个字段 "waitListedTime",collection 将按该字段进行排序。您按下按钮可以为所选学生添加时间戳,助手会 运行 反应,您的学生列表会在屏幕上更新。
Template.Students.onCreated(function() {
this.subscribe('students');
});
Template.Students.helpers({
students() {
return Students.find({}, {sort: {waitListedTime: 1}});
}
});