Meteor client-side pagination

Question

There's a collection Comments. Currently comments for the specfic Content are all published to the client.

Without pagination I can successfully render them in my template, insert new comments and enjoy the reactivity.

I'm fine at the moment with all comments sent to the client but I want to implement all-client-side pagination to visually simplify the page much like FB does.

Hare are the rules:

Comments are always sorted by the creation timestamp ASC (newer at the bottom of the list)
I need to show the total number of records in the collection (T)
I need to show the total number of comments currently displayed (C)
If there are more comments (C < T) I need to show a 'See more' link
Initially I show 5 newest comments (or all of them if there're less than 5)
New comments (pushed from the server) are instantly shown at the end of the list
When I click the 'See more' link up to 10 extra comments (the newest from the currently invisible -- and all of them are older that those already shown) are shown in the beginning of the list

So effectively it could be like:

have the minTime variable
initially set it to the timestamp of the 5th newest comment
when I click the link set it to the timestamp of the 10th newest comment older than the current value
template renders all the comments not older than this value
at some point calculate values C and T and save them

I tried to solve this with a bunch of Session variables but didn't succeed -- I think at some point getting and setting these vars from the template leads to recursion or what? Additional problem is that I don't reliably know the 'initial' moment when I should calculate the minTime for the 1st time -- comments may still not be synched when the template is created or rendered for the first time.

So, the question: what is the proper way to fulfill my requirements?

ram1 ram1 · Accepted Answer · 2013-01-22T15:33:57

Solution:

Meteor.startup(function(){
    Session.set('number_of_visible_comments', 5);
});

Template.comments = function() {
    return Comments.find({content: id_of_content}, {
        sort: {timestamp: -1}, 
        limit: Session.get('number_of_visible_comments')
    });
};

Template.total_number_of_comments = function() {
    return Comments.find({content: id_of_content}).count();
};

Template.number_of_visible_comments = function() {
    return Session.get('number_of_visible_comments').count();
};

Template.comments.events({
    'click': function() {
        var count = Session.get('number_of_visible_comments') + 10;
        Session.set('number_of_visible_comments', count);
    }
});

Meteor client-side pagination

2 Answers