How to implement pagination without a complete data reloading with Blaze


#1

The message lists in my app start heaving to many record so implemented pagination data publication. The code is pretty simple:

I intercept the scroll event (upward) on the messages div:

'scroll #messages-div' :function(e, t) {
	//logger.info('scrollTop', $('#messages-div').scrollTop());
	var threshold, target = $('#infinite-messages-spinner');
	// if (! target.lenght) return;
	threshold = $('#messages-div');
	if (threshold.scrollTop() === 0) {
		if (!target.is(':visible') && ! (Messages.find().count() < Session.get('messages-limit'))) {
			target.show();

			Session.set('messages-limit', Session.get('messages-limit') + MESSAGES_INCREMENT);
		}
	} else {
		if (target.is(':visible')) {
			target.hide();
		}
	}
}

and the publication does the rest:

  Meteor.publish('messages', function(channelIdParam, messageNumberLimit) {
    return Messages.find({channelId : channelIdParam}, {sort: {createdAt :-1}, limit : messageNumberLimit});
  });

Now, when I scroll my list upward a new chunk of data gets loaded and a complete new list of messages appears on the screen:

[UPDATE]
i.e. messages-limit session variable is changed, the publication is recomputed, the subscription changes consequently and my messages helper that retrieves data from the server is executed once again. The code in the messages template is trivial:

<template name="messages">
	{{#if Template.subscriptionsReady}}
		{{#each messages}}
			{{> message}}
		{{/each}}
		<spam id="bottom-page-anchor"></spam>
	{{/if}}
</template>

What I get is that the whole list of messages is reloaded, while I would love to get the same effect you have with sites like Twitter. The messages already on the screen stay on the screen and the new message chunk gets added as soon as it is ready to be displayed.

Is the any technique to load only the new chunk of data leaving the previous one on the screen keep using Blaze?