带有铁路由器的流星无法让光滑的旋转木马工作 [英] Meteor with iron-router cant get slick carousel working
问题描述
我正在使用铁路由器，我有一个路由模型"，其中包含一个项目列表.当用户单击这些项目之一时，将使用新路由模型"，所选项目的名称作为参数传递并用于从数据库加载有关该模型的数据.
我想使用光滑的轮播，使用从数据库返回的图像数组(基于参数).
{{#每张图片}}<div class="item"><img src="/images/{{this}}" alt="">{{/每个}}
我应该在哪里调用 slick init?
一般来说，你应该在模板的 onRendered 中初始化插件 回调.在您的情况下，这将不起作用，因为 onRendered 将在任何图像插入到 DOM 之前触发.对于我见过的其他轮播插件，以下策略有效:
- 将每个项目移动到其自己的模板 (
carouselItem). - 向
carouselItem添加一个onRendered回调，以便在每个项目添加到 DOM 后初始化插件.
我还没有用光滑的旋转木马尝试过这个，但它看起来像这样:
<div id="轮播">{{#每张图片}}{{>轮播物品}}{{/每个}}<模板名称="carouselItem"><div class="item"><img src="/images/{{this}}">
Template.carouselItem.onRendered(function() {$('#carousel').slick();});假设圆滑的轮播可以多次初始化，这种方法应该可行.请注意，一个可能的缺点是每当 images 更新时插件都会刷新.解决此问题的一种方法是在 find{reactive: false} 选项>.
I am using iron-router, i have a route "models" which has a list of items. When the user clicks one of these items a new route "model" is used, the name of the selected item is passed as a param and used to load data about that model from the database.
I want to use slick carousel, using an array of images returned from the database (based on the param).
<div id="carousel">
{{#each images}}
<div class="item">
<img src="/images/{{this}}" alt="">
</div>
{{/each}}
</div>
Where should I call the slick init?
Generally speaking, you should initialize plugins in a template's onRendered callback. In your case, that won't work because onRendered will fire before any of the images are inserted into the DOM. With other carousel plugins I've seen, the following strategy works:
- Move each item to its own template (
carouselItem). - Add an
onRenderedcallback tocarouselItemso that the plugin will be initialized after each item is added to the DOM.
I haven't tried this with slick carousel, but it would look something like this:
<template name="carousel">
<div id="carousel">
{{#each images}}
{{> carouselItem}}
{{/each}}
</div>
</template>
<template name="carouselItem">
<div class="item">
<img src="/images/{{this}}">
</div>
</template>
Template.carouselItem.onRendered(function() {
$('#carousel').slick();
});
Assuming slick carousel can be initialized multiple times, this approach should work. Be aware that one possible downside is that the plugin will refresh whenever images is updated. One way to fix that is to use the {reactive: false} option in your find.
这篇关于带有铁路由器的流星无法让光滑的旋转木马工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
