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>incredible@gmail.com</td>
          </tr>
                    <tr>
            <td>Cob</td>
            <td>Aurt</td>
            <td>123</td>
            <td>456</td>
            <td>incredible@gmail.com</td>
          </tr>
                    <tr>
            <td>Dob</td>
            <td>Durt</td>
            <td>123</td>
            <td>456</td>
            <td>incredible@gmail.com</td>
          </tr>
        </tbody>
      </table>
    <script>
      $('.sortable.table').tablesort();
    </script>
  </div>

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

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

Answer 1

像这样的第三方库需要在初始化时渲染DOM。当您致电table

时，您的sortable课程$('.sortable.table').tablesort();尚未呈现

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

Link to blaze docs

这是可排序的行为，但在不使用第三方库的情况下在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: 'incredible@gmail.com' },
      {first: 'Fred', last: 'Dagg', address: '123', telephone: '456', email: 'incredible@gmail.com' },
      {first: 'Sam', last: 'Black', address: '123', telephone: '456', email: 'incredible@gmail.com' },
      {first: 'Frank', last: 'Smigh', address: '123', telephone: '456', email: 'incredible@gmail.com' },
    ];
    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() 
                                     }  });
  }
})

语义UI Tablesort在Meteor中不起作用

1 个答案: