Как использовать карусель Slick.io с метеорами и коллекциями?

Я наткнулся на карусель изображений 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
    });
  }
});

meteor slick.js meteor-helper flow-router
person Achtel    schedule 18.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это работает, если каждый элемент карусели обрабатывается в своем собственном шаблоне, который затем может инициализировать slick 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
  });
});
person Achtel    schedule 20.02.2016
comment
Просто к вашему сведению... похоже, что вы инициализируете гладкий плагин n раз для каждого imageItem у вас есть - что, вероятно, плохо. Вы должны добавить оператор if в onRendered, чтобы проверить, является ли это последним imageItem по сравнению с count() из всех imageItems. Тогда вы знаете, что все они отрендерены, и можете инициализировать плагин. - person evolross; 24.10.2017