Question

我遇到了kenwheeler的图像轮播，我试图让它在我的Meteor应用程序中运行。我正在使用risul：光滑的包装。

问题是建议在渲染时初始化模板，但此时订阅中的图像并不一定都已加载...如果我在本地驱动器上使用静态图像一切正常，但如果我尝试在{{#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

如果轮播中的每个项目都在自己的模板中处理，那么它就可以工作，然后可以在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
  });
});

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

1 个答案: