Meteor - Isotope不适用于嵌套模板

Question

我正在尝试将Isotope与我的Meteor应用程序集成，但我遇到了一些并发症。当我在我的同位素容器中直接使用html时它工作正常，但是当我尝试使用嵌套模板时，Isotope不起作用。这就是我现在所拥有的。

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>

任何帮助都会很棒。

Answer 1

问题本身是您的home模板在其嵌套模板之前呈现。因此，没有任何.grid-item元素。

在您的情况下解决这个问题的唯一方法是推迟使用Meteor.defer()或Meteor.setTimeout()初始化.isotope(...)，希望这会给嵌套模板足够的时间进行渲染：

Template.home.onRendered(function() {
  Meteor.setTimeout(function() {
    $('.grid').isotope({
      // options
    });
  }, 250);

<强>加：

另一种选择是嵌套模板通过其onRendered函数通知其父级：

<强> Main template ：

Template.home.onCreated(function() {
  this.renderGrid = _.debounce(() => {
    $('.grid').isotope({
      // options
    });
  }, 250);
});

Template.home.events({
  'ready.griditem .grid'(e, tpl) {
    tpl.renderGrid();
  }
});

<强> Nested template ：

Template.card.onRendered(function() {
  $('.grid').trigger('ready.griditem');
});