Click to sort not working

1

The click event should sort the data. But nothing happens.

Collection:

Cvs = new Mongo.Collection('cvs');

Template

Meteor.subscribe('cvs');

Template.Cvs.onCreated(function(){
    var self = this;
    self.autorun(function(){
        self.subscribe('cvs');
    })
});

Template.Cvs.helpers({
    cvs: () =>{
        return Cvs.find({}, {sort: {createdAt: -1}});
    }
});

Template.Cvs.events({
    'click .sort': function(){
        return Cvs.find({}, {sort: {createdAt: 1}});        
    }
});
2

Return in events is meaningless. You should set reactive variable or session variable for your sort value and simply change it in the events, not run find again.

3

I tried something like in this example , but no effect, and i don’t understand what the || 1 is.

Tasks = new Mongo.Collection("tasks");

Template.body.events({
  "click .sort_title": function () {
    var sortValue = Session.get('sort') || 1;
    Session.set('sort', sortValue * -1);
  }
});

Template.body.helpers({ 
  tasks: function () {
    var sortValue = Session.get('sort') || 1;
    return Tasks.find({}, {sort: {movie_title: sortValue}}); 
  }
});
4

This means if there is a value in Session.get('sort') use it, otherwise use 1 as the value. So this is a way of always having a value, even if you haven’t predefined the initial value of your Session’s sort key.

Taking your original code I would tackle it like this:

Template.Cvs.onCreated(function () {
  this.subscribe('cvs');
  this.sortOrder = new ReactiveVar(1);
});

Template.Cvs.helpers({
  cvs() {
    const instance = Template.instance();
    return Cvs.find({}, { sort: { createdAt: instance.sortOrder.get() } });
  },
});

Template.Cvs.events({
  'click .sort'(event, instance) {
    instance.sortOrder.set(instance.sortOrder.get() * -1);
  },
});

I have moved the subscription into the template instance, where it will be cleaned up automatically when the template is destroyed. I also have a ReactiveVar on the template instance, preset to the initial sort order.

The helper returns all documents sorted by the current sort order, and the event handler just flips the sort order value each time it’s clicked.

I’ve also tidied up the ES2015 syntax.

Assuming the rest of your code around this is correct, this will work.

Edit: you will need to meteor add reactive-var to your project, if you don’t already have it.

1 Like
5

Thank you for taking the time to explain.
Your example works! Although i have yet to play with the changes in the syntax to understand it.

1 Like