如何将 Slick.io 轮播与流星和集合一起使用？

Question

我遇到了 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
    });
  }
});

Answer 1

如果轮播的每个项目都在其自己的模板中处理，然后可以初始化光滑的 onRendered，它就可以工作。

<template name="image">
  {{#if Template.subscriptionsReady}}
    <div id="carousel">
      {{#each images}}
        {{> imageItem}}
      {{/each}}
    </div>
    <button type="button" class="btn btn-default" id="addSlide">Add</button>
  {{else}}
    <div>Loading...</div>
  {{/if}}
</template>

<template name="imageItem">
  <div id="demo-box"><img src="{{url}}" /></div>
</template>

---

Template.imageItem.onRendered( () => {
  $('#carousel').slick({
    infinite: false,
    dots: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true
  });
});