如何在流星中移动集合中的项目？

Question

我正在创建一个等待列表类型的应用程序。我目前拥有它，我的 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 时，它将移动到底部。

如何让集合自行重新排序，以便所选项目移动到集合的末尾？

Answer 1

您不会 "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}});
    }
});

如何在流星中移动集合中的项目？

How to move item in collection in meteor?

html

javascript

meteor

meteor-collections