代码之家 › 专栏 › 技术社区 › Ebenizer Pinedo

流星同位素不适用于嵌套模板

jquery-isotope meteor-blaze meteor javascript

Ebenizer Pinedo · 技术社区 · 7 年前

家html

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

import './home.html';

Template.home.onRendered ( function() {

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

卡片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>

1 回复 | 直到 7 年前

Styx 7 年前

问题是你的 home 呈现模板其嵌套模板。因此,没有任何 .grid-item 元素。

.isotope(...) 使用 Meteor.defer() 或 Meteor.setTimeout() 希望这能给嵌套模板足够的时间来渲染:

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

推荐文章

Shaun Taylor · 同位素JS库-卡重叠

7 年前

J.Pillonin · 如何将fancybox与filterizr一起使用,以便图像库中仅显示过滤的项目?

7 年前

vishnu · 同位素垂直标签需要在加载时显示第一项

7 年前

Ebenizer Pinedo · 流星同位素不适用于嵌套模板

7 年前

Kareem Kamal · 如何垂直堆叠图像[复制]

7 年前

Nathe · 同位素-组合按钮和UI滑块不工作

9 年前

Mohamed Rihan · 同位素过滤器复选框和收音机

10 年前

pixeloco · 用同位素单击展开元素

10 年前

dingo_d · 联接多个数组,并仅返回唯一元素jQuery

10 年前

Dan Whiteside · Woocommerce的同位素(负载滞后)

10 年前