Isotope package with nested templates


#1

How can I get the Isotope package from Atmosphere to behave appropriately with nested templates? Such as:

<template name="articlesArchive">
  <div class="grid">
    {{#each articles}}
      {{> article}}
    {{/each}}
  </div>
</template>

<template name="article">
  <div class="grid-item">
    {{title}}
    {{body}}
  </div>
</template>

Template.articlesArchive.rendered = function() {
  $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
  });
};

This attaches the correct style to the grid, but not to each grid item. If I use this instead:

Template.article.rendered = function() {
  $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'fitRows'
  });
};

It still doesn’t work properly. Sometimes the isotope styling is attached to a few of the items, sometimes to all of the items, sometimes to none of the items. Is there a more appropriate way I should be initializing the isotope function?


#2

Before initializing isotope make sure your subscription is ready and each article has had time to be added to the DOM or use the approach described in this post: Blaze: How to force a template to rerender from scratch?