Meteor - Isotope 不适用于嵌套模板

Question

我正在尝试将 Isotope 与我的 Meteor 应用程序集成，但我遇到了一些问题。当我在 Isotope 容器中直接使用 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');
});