我遇到了 kenwheeler 的图像轮播,我正试图让它在我的 Meteor 应用程序中工作。我正在使用 risul:slick 包装器。
问题是建议在渲染时初始化模板,但此时订阅中的图像不一定都已加载......如果我在本地驱动器上使用静态图像一切正常,但如果我尝试在 {{#each}} 循环中创建幻灯片这一切都出错了。
我尝试使用 {{#if Template.subscriptionsReady}} 块并使用模板帮助程序手动调用初始化程序,但这也不起作用。
将 console.log 语句放入初始化程序时我注意到的有趣的事情是,当我第一次导航到页面时,它似乎被调用了 3 次,但是当我进行浏览器刷新时,它只被调用一次并中断(这发生在静态如果我在 onRender 块中没有初始化代码,还有图像?)。
具有静态引用的模板代码(只要 .slick() 调用位于 Template.image.onRendered 块内):
<template name="image">
<div id="carousel">
<div id="demo-box"><img src="../../img/brush.jpg" /></div>
<div id="demo-box"><img src="../../img/drill.jpg" /></div>
<div id="demo-box"><img src="../../img/hammer.jpg" /></div>
<div id="demo-box"><img src="../../img/shovel.jpg" /></div>
<div id="demo-box"><img src="../../img/spanner.jpg" /></div>
<div id="demo-box"><img src="../../img/tape.jpg" /></div>
</div>
</template>
反应模板
<template name="image2">
{{#if Template.subscriptionsReady}}
{{slickInit}}
<div id="carousel">
{{#each images}}
<div id="demo-box"><img src="{{url}}" /></div>
{{/each}}
</div>
{{else}}
<div>Loading...</div>
{{/if}}
</template>
Template.image.onCreated( () => {
// limit of images returned = 5
Template.instance().subscribe('images', 5);
});
Template.image.onRendered( () => {
$('#carousel').slick({
infinite: false,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true
});
});
Template.image.helpers({
images() {
return Images.find();
},
// this is supposed to replace the onRender call
slickInit() {
$('#carousel').slick({
infinite: false,
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: true
});
}
});