I’m currently trying to implement a “Load more” button on a simple news page.
I’ve got the search working, thanks to Meteor Chef, and I followed the same principles to implement a “Load more” button. The relevant code is as follows:
Template:
Template.listAllNews.onCreated(function() {
template.limit = new ReactiveVar(10);
Tracker.autorun( () => {
template.subscribe( 'news.all', template.searchQuery.get(), template.limit.get(), () => {
setTimeout( () => {
template.searching.set( false );
}, 300 );
});
});
Template.listAllNews.events({
'click .load-more-button': function (event, template) {
var limit = template.limit.get();
limit += 10;
template.limit.set( limit );
}
});
Publication:
let query = {},
projection = { limit: limit, sort: { submitted: -1 } };
if ( search ) {
let regex = new RegExp( search, 'i' );
query = {
$or: [
{ title: regex }
]
};
projection.limit = 100;
}
return News.find( query, projection );
This works. The problem is: it refreshes all the data instead of just loading the extra 10 news articles. I want it to only load the extra 10 articles upon click, and not to “refresh” the subscription.
How can I do that?