Как переместить предмет в коллекцию в метеор?

Question

У меня есть приложение типа списка ожидания, которое я создаю. В настоящее время у меня есть это, где мой стол будет заполнен коллекцией. Я хочу иметь возможность нажать кнопку, и эта строка в таблице будет перемещена к нижней части таблицы. Вот где таблица заполнена.

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

Я знаю, что мне нужно какое-то событие для кнопки. но я не уверен, как сделать так, чтобы элемент в коллекции перемещался в коллекцию, чтобы при повторном заполнении таблицы он перемещался вниз.

Как заставить коллекцию переупорядочить себя так, чтобы выбранный элемент переместился в конец коллекции?

Answer 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}});
    }
});