Isotope doesn't work with nested templates

help
1

Hi people. I’m trying to integrate Isotope with my Meteor App, but I’ve been having some complications. When I use directly html inside my Isotope container it works fine, but when I try using nested templates, Isotope doesn’t work. Here is what I have at the moment.

Home.html

<template name="home">
  <div class="grid">
    {{> card }}
  </div>
</template>

Home.js

import './home.html';

Template.home.onRendered ( function() {

  $('.grid').isotope({
    // options
    itemSelector: '.grid-item',
    layoutMode: 'masonry',
    masonry: {
      gutter: 24
    }
  });
});

Card.html

<template name="card">

  {{#each publications}}
    <div class="grid-item">
      <div class="card-margin">
        <img src="{{avatar}}" alt="" class="avatar"/>
        <div class="name"> {{username}} <div class="dropdown"><a>></a><div class="dropdown-content">{{#if isOwner}}<button class="delete">&times;</button> <button class="edit">Edit</button>{{else}}<button>Report</button> <button>Unfollow</button>{{/if}}</div></div></div>
        <div class="date" id="date-show">{{customDate}} </div>
        <p class="card">
            {{ pub }}
        </p>
      </div>
    </div>
  {{/each}}
</template>

Any help would be great.

2

I can’t really help with your particular problem, as I gave up on isotope a long time ago. I would recommend checking out bricks though. It was much friendlier to get going in our app vs the other masonry options.