流星与铁路由器不能得到光滑的旋转木马工作

Question

我正在使用铁路由器,我有一个路线"模型",其中有一个项目列表.当用户单击其中一个项目时,将使用新的路径"模型",所选项目的名称将作为参数传递,并用于从数据库加载有关该模型的数据.

我想使用光滑的轮播,使用从数据库返回的图像数组(基于参数).

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

我应该在哪里调用光滑的init？

Answer 1

一般来说,您应该在模板的onRendered回调中初始化插件.在您的情况下,这将无法工作,因为在onRendered将任何图像插入DOM之前将触发.通过我见过的其他旋转木马插件,以下策略可行:

1. 将每个项目移动到自己的模板(carouselItem).
2. 添加onRendered回调,carouselItem以便在将每个项添加到DOM后初始化插件.

我没有尝试使用光滑的旋转木马,但它看起来像这样:

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

假设光滑的轮播可以多次初始化,这种方法应该有效.请注意,一个可能的缺点是插件会在更新时images刷新.解决这个问题的一种方法是{reactive: false}在查找中使用该选项.