语义 UI 表排序在 Meteor 中不起作用

Question

>我正在尝试通过 Blaze 模板中的 Meteor 使用语义 UI 制作一个可排序的表，但排序功能不起作用

<template name="Home_Page">
  <div class="ui container">
    {{#if Template.subscriptionsReady}}
      <table style="margin-top: 20px" class="ui sortable celled table">
        <thead>
        <tr>
          <th class="descending">First</th>
          <th>Last</th>
          <th>Address</th>
          <th>Telephone</th>
          <th>Email</th>
          <th>Edit</th>
        </tr>
        </thead>
        <tbody>
        {{#each contact in contactsList}}
          <tr>
            <td>{{contact.first}}</td>
            <td>{{contact.last}}</td>
            <td>{{contact.address}}</td>
            <td>{{contact.telephone}}</td>
            <td>{{contact.email}}</td>
            <td><a href="{{pathFor 'Edit_Contact_Page' _id=contact._id}}">Edit</a></td>
          </tr>
        {{/each}}
        </tbody>
      </table>
    {{else}}
      {{> Loading}}
    {{/if}}
    <script src="https://semantic-ui.com/javascript/library/tablesort.min.js">
    </script>
    <script>
      $('.sortable.table').tablesort();
    </script>
  </div>
</template>

表格

正确显示，单元格表格组件工作，但可排序部分不工作

我试图在不使用按预期工作的 Meteor 的情况下实现这一点

  <div class="ui container">
      <table style="margin-top: 20px" class="ui sortable celled table">
        <thead>
        <tr>
          <th class="descending">First</th>
          <th>Last</th>
          <th>Address</th>
          <th>Telephone</th>
          <th>Email</th>
        </tr>
        </thead>
        <tbody>
          <tr>
            <td>Bob</td>
            <td>Burt</td>
            <td>123</td>
            <td>456</td>
            <td>[e-mail]</td>
          </tr>
                    <tr>
            <td>Cob</td>
            <td>Aurt</td>
            <td>123</td>
            <td>456</td>
            <td>[e-mail]</td>
          </tr>
                    <tr>
            <td>Dob</td>
            <td>Durt</td>
            <td>123</td>
            <td>456</td>
            <td>[e-mail]</td>
          </tr>
        </tbody>
      </table>
    <script>
      $('.sortable.table').tablesort();
    </script>
  </div>

非 Meteor 版本的代码可以在以下 JSFiddle 中找到： https://jsfiddle.net/seanytak/0wyrxqt0/

是否有其他步骤可以在 Meteor 中实现相同的行为？

Answer 1

像这样的第三方库要求在初始化时已经渲染了DOM。 调用 $('.sortable.table').tablesort(); 时，具有类 sortable 的table尚未呈现

为此，您需要onRendered回调将$('.sortable.table').tablesort();移动到模板中，并使用autorun来处理订阅数据到达的等待，并在收到新数据并重新呈现模板时重新初始化组件。

链接到 blaze 文档

在不使用

第三方库的情况下，在 Meteor 中创建这种可排序的行为是微不足道的，使用如下内容：

import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Meteor } from 'meteor/meteor';
import './main.html';
Template.Home_Page.helpers({
  contactsList() {
    var data =  [
      {first: 'Bob', last: 'Dole', address: '123', telephone: '456', email: '[e-mail]' },
      {first: 'Fred', last: 'Dagg', address: '123', telephone: '456', email: '[e-mail]' },
      {first: 'Sam', last: 'Black', address: '123', telephone: '456', email: '[e-mail]' },
      {first: 'Frank', last: 'Smigh', address: '123', telephone: '456', email: '[e-mail]' },
    ];
    var sortedData = _.sortBy(data,
                              function(x){
                                  return x[Template.instance().sortBy.get()];
                              });
    if(Template.instance().sortOrder.get() == -1){
        sortedData = sortedData.reverse();
    }
    return sortedData;
  }
});
Template.Home_Page.onCreated(function() {
  this.sortOrder = new ReactiveVar(1);
  this.sortBy = new ReactiveVar('first');
});
Template.Home_Page.events({
  "click th":  function(event, template){
    headerClicked = _.find(
            event.currentTarget.classList,
            function(x){ return x.startsWith('js-');}
          ).slice(3);
    if( headerClicked == template.sortBy.get()){
      template.sortOrder.set(template.sortOrder.get() * -1);
    } else {
      template.sortBy.set(headerClicked);
      template.sortOrder.set(1);
    }
  }
});

并将以下类添加到表头：

<thead>
  <tr>
    <th class="js-first">First</th>
    <th class='js-last'>Last</th>
    <th class='js-address'>Address</th>
    <th class='js-telephone'>Telephone</th>
    <th class='js-email'>Email</th>
    <th class='js-no-sort'>Edit</th>
  </tr>
</thead>

如果数据来自 Mongo，则contactsList帮助程序将如下所示：

Template.Home_Page.helpers({
  contactsList() {
    return Contacts.find({}, { sort: { Template.instance().sortBy.get() : 
                                       Template.instance().sortOrder.get() 
                                     }  });
  }
})