带有铁路由器的流星无法使光滑的旋转木马工作

Question

我正在使用 iron-router，我有一条路线 "models"，其中有一个项目列表。当用户单击这些项目之一时，将使用新路由 "model"，所选项目的名称作为参数传递并用于从数据库加载有关该模型的数据。

我想使用 slick carousel，使用从数据库返回的图像数组（基于参数）。

<div id="carousel">
    {{#each images}}
    <div class="item">
        <img src="/images/{{this}}" alt="">
    </div>
    {{/each}}
</div>

我应该在哪里调用 slick init？

Answer 1

通常你会在 Template.myTemplate.onRendered:

中的元素上调用插件

Template.xxx.onRendered(function() {
  $('#carousel').slick();
});`

Answer 2

一般来说，您应该在模板的 onRendered 回调中初始化插件。在您的情况下，这将不起作用，因为 onRendered 将在任何图像插入 DOM 之前触发。对于我见过的其他轮播插件，以下策略有效：

将每个项目移至其自己的模板 (carouselItem)。
向 carouselItem 添加 onRendered 回调，以便在每个项目添加到 DOM 后初始化插件。

我还没有用 slick carousel 试过这个，但它看起来像这样：

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

假设 slick carousel 可以多次初始化，这个方法应该可行。请注意，一个可能的缺点是插件将在 images 更新时刷新。解决此问题的一种方法是在 find.

中使用 {reactive: false} 选项

带有铁路由器的流星无法使光滑的旋转木马工作

Meteor with iron-router cant get slick carousel working

meteor

iron-router

slick.js