流星与铁路由器不能使圆滑的传送带工作 [英] Meteor with iron-router cant get slick carousel working

问题描述

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

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?

推荐答案

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

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:

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

1. Move each item to its own template (carouselItem).
2. Add an onRendered callback to carouselItem so 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();
});

假设圆盘传送带可以多次初始化，则此方法应该有效.请注意，可能的不利之处在于，每当更新images时插件都会刷新.解决此问题的一种方法是在查找中使用{reactive: false}选项.

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屋！