如何将 Slick.io 轮播与 meteor 和 collections 一起使用？

Question

我遇到了 kenwheeler 的图像轮播，我正试图让它在我的 Meteor 应用程序中工作。我正在使用 risul:slick 包装器。

问题是建议在渲染时初始化模板，但此时订阅中的图像不一定全部加载...如果我在本地驱动器上使用静态图像一切正常，但如果我尝试在 {{#each}} 循环中创建幻灯片，一切都会出错。

我试过使用 {{#if Template.subscriptionsReady}} 块并使用模板帮助程序手动调用初始化程序，但这也没有用。

我在初始化程序中放入 console.log 语句时注意到的一件有趣的事情是，当我第一次导航到该页面时，它似乎被调用了三次，但当我刷新浏览器时，它只被调用了一次并中断（如果我在 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

如果轮播的每个项目都在其自己的模板中处理，然后可以在渲染时初始化光滑。

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

如何将 Slick.io 轮播与 meteor 和 collections 一起使用？

How do I use Slick.io carousel with meteor and collections?

meteor

meteor-helper

slick.js

flow-router