Meteor event when Template is freshed - meteor

Question

I am working on a Meteor project that has come custom Pagination using Sessions. The template rendering the contents of said items is using ellipsis.js and highlight.js to do some DOM formatting. The code looks something like thus:
if (Meteor.isClient) {
Meteor.startup(function () {
Session.setDefault("homePageSize", 10);
Session.setDefault("homePageStart", 0);
});
}
Template.home.articlesPaginated = function() {
return Articles.find({published: true}, {sort: {post_date: -1}, skip: Session.get("homePageStart"), limit: Session.get("homePageSize")});
}
Template.home.rendered = function() {
// Setup ellipsis
$('.ellipsis').dotdotdot({
ellipsis: '...',
wrap: 'word',
fallbackToLetter: true,
after: $('a.blog_continue')
});
// Setup highlight.js
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
}
Template.home.events({
'click .next': function(event) {
var offset = Session.get("homePageStart") + Session.get("homePageSize");
if (offset < 0) {
offset = 0;
}
Session.set("homePageStart", offset);
},
'click .prev': function(event) {
var offset = Session.get("homePageStart") - Session.get("homePageSize");
if (offset < 0) {
offset = 0;
}
Session.set("homePageStart", offset);
}
});
Pagination is working just fine, but as soon as the Template re-renders I loose all the ellipsis.js and highlight.js formatting. I know the obvious reason is that the DOM has changed, and since the Template.render only runs once up-front and doesn't happen when the Template re-renders the DOM updates are not being applied. So, what is the best way to trigger ellipsis.js and highlight.js after the Template is done such that it gets re-called everytime the Template re-renders?

Answer 1

Basically you need to listen for changes in your Articles collection, which is a client-side subset of the server database clipped to contain only the currently visible paginated articles.
When you detect a change in the articles subset, you'll need to retrigger initialization of ellipsis.js and highlight.js.
You could reorganize your code as follow :
First, we define the cursor declaration as a separate function on his own because we need to use it twice :
function articlesPaginated(){
return Articles.find({
published: true
}, {
sort: {
post_date: -1
},
skip: Session.get("homePageStart"),
limit: Session.get("homePageSize")
});
}
Template.home.helpers({
articlesPaginated:articlesPaginated
});
Then in the rendered callback, we need to setup a reactive computation that will depend on this cursor, so whenever the articles subset is updated to a new page, our computation will rerun.
But we need to be aware that the helper we defined on the home template returns the same cursor so it's going to be invalidated and trigger DOM refresh AT THE SAME TIME... JavaScript is single-threaded and the Tracker.Computation manual states that the order of execution of concurrently invalidated computations is unpredictable.
So we cannot just trigger the ellipsis/highlight initialization code in the computation because this setup code assumes that the DOM is ready, however at this precise moment we don't know if DOM manipulation has just happened before or is going to happen immediately after.
Fortunately there is a Tracker.afterFlush method which allows us to execute code after concurrent computations are done so we are sure that by that time DOM state is OK.
Having understand all these implications, we can write the following rendered callback :
Template.home.rendered=function(){
// declare a template managed Deps.Computation
this.autorun(function(){
// have this reactive computation depend on the SAME cursor
// that triggers DOM rerendering
var articles=articlesPaginated();
// forEach is actually the method that triggers a dependency on the cursor in this computation
articles.forEach(function(article){
// you can manipulate the model here if needed
});
// setup a callback to execute your DOM alteration code after
// it is actually rerendered by Blaze
Tracker.afterFlush(function(){
// your ellipsis/highlight initialization code goes here
});
});
};

Answer 2

If you can put your Articles into another template, then you could apply formatting individually as they are inserted.
Template.article.rendered = function () {
// Setup ellipsis
this.$('.ellipsis').dotdotdot({
ellipsis: '...',
wrap: 'word',
fallbackToLetter: true,
after: $('a.blog_continue')
});
// Setup highlight.js
this.$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
};
Assuming your template looks something like this.
<template name="home">
...
{{#each articlesPaginated}}
{{> article}}
{{/each}}
{{> paginationControls}}
...
</template>
This has the added benefit of scoping the formatting to just the articles, rather than the entire DOM.