의미 UI Tablesort는 유성

Question

나는 블레이즈 템플릿에서 유성을 통해 시맨틱 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> 

표는 적절하게 표시

하고 단세포 작동하지 않습니다 테이블 구성 요소 작동하지만 정렬 부분은 내가 t를위한

<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();

이 작업을 수행하려면 구독 데이터가 도착할 때까지 대기를 처리하는 autorun으로, 템플릿에 onRendered 콜백을 $('.sortable.table').tablesort();를 이동하고를 다시 초기화해야 호출 할 때 렌더링되지 않았습니다 새 데이터가 수신되고 템플리트가 다시 렌더링 될 때 구성 요소.

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

및 테이블 헤더에 다음과 같은 클래스를 추가 :

Link to blaze docs

이 정렬 동작은 같은 것을 사용하지만 제 3의 라이브러리를 사용하지 않고 유성에서 만드는 사소한입니다

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