我正在尝试将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">×</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>
任何帮助都会很棒。
答案 0 :(得分:0)
问题本身是您的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');
});