Calling holder.js in Meteor

Question

I'm new to Meteor and trying to get holder.js to work in the framework. It works on refresh, but when moving from one route to another, it breaks.

The documentation just says "Because Meteor includes scripts at the top of the document by default, the DOM may not be fully available when Holder is called. For this reason, place Holder-related code in a "DOM ready" event listener."

I assume I need a Template.foo.onRendered callback, but unsure how to format it. Here's the HTML:

<img class="holder" src="holder.js/120x120">

And here's the callback I've added in a .js file:

Template.contactSingle.onRendered(function() {
  this.$('.holder').Holder.run();
});

Again, the holder.js images appear on refresh, but I can't get them to render when going from one page to another. I'm using FlowRouter for routing.

I'm sure it's something simple. Any help is greatly appreciated!

Answer 1

Change your code from:

Template.contactSingle.onRendered(function() {
  this.$('.holder').Holder.run();
});

to:

Template.contactSingle.onRendered(function() {
  Holder.run({images: document.querySelectorAll('.holder')});
});

Obviously you do not want to do the costly document.querySelectorAll('.holder'). If you can reduce that to you template using a class from its wrapper.

For example:

Template:

<template name="singlePost">
  <div class="single-post">
    <h2>This is the singlePost area.</h2>
    <img class='holder' src="holder.js/300x200">
  </div>
</template>

and onRendered

  Template.singlePost.onRendered(function() {
    Holder.run({
      images: document.querySelectorAll('.single-post .holder')
    });
  });