how do i implement a “load more” button for meteor collection

Question

******* UPDATE ********

I've asked another question using the suggestion below... but using Iron-Router RouteController

call method in Iron-Router RouteController from Template.tmpl.helpers() not working

---

Basically what I want to do is have a button that will load more records into my collection on the client. I have an unknown number of records in the db, but I only want the latest 500 or so sent on load to the client.

I'm trying to emulate a "continue search on server" functionality. I'm not looking for a pagination solution.

Suggestions?

------- edited to add code ------------

this is in my /server/publications.js file:

Meteor.publish('clients', function( requestOptions ){
  check(requestOptions, Object)
  var options = _.extend(opts, requestOptions)
  return Clients.find(baseQuery, options)
})

and this is in my /lib/router.js file:

Router.route('/clients', {
  name : 'clientList',
  waitOn : function(){
    return Meteor.subscribe('clients', {limit:500})
  }
})

basically i want to show the last 500 new clients, but allow the end-user to "load more" or "load all". i'm not sure how to do that reactively with a subscription...

Answer 1

Attach this event handler to the template that hosts your button:

Template.clients.events({
 "click .load-more-button": function (event, template) {
   template.skipped += 500;
   template.subscriptions.push(Meteor.subscribe("client", {
     limit: 500, 
     skip: template.skipped
   }));
 }
});

Template.clients.created = function () {
  this.subscriptions = [];
  this.skipped = 0;
};

//Stop the subscriptions when template is destroyed
Template.clients.destroyed: function () {
  _.invoke(this.subscriptions, "stop");
};

As long as your client side cursor does not have a limit set, it should work, however it also means that any clients loaded by other templates etc will appear on the list.