Meteor

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() or 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');
});

Meteor - 同位素不适用于嵌套模板

Meteor - Isotope doesn’t work with nested templates

javascript

meteor-blaze

jquery-isotope