流星：数据循环后的启动功能（轮播）

Question

我正在尝试通过在 blaze 助手中启动来制作 Flickity Carousel。我确实有以下错误：

Exception in template helper: TypeError: $(...).flickity is not a function

这是我的轮播模板助手：

Template.carouselTemplate.onCreated(function bodyOnCreated() {
  this.state = new ReactiveDict();
  Meteor.subscribe('albums');
})

Template.carouselTemplate.helpers({
  albums() {
    return Albums.find({});
  },
  initializeCarousel () {
    $('.carousel').flickity({
      // options
      "lazyLoad": true
    });
  }
});

以及模板本身：

<template name='carouselTemplate'>

<div class="carousel">

   {{#each albums}}
   <div class="carousel-cell">
     <img src={{cover}} alt="cat nose" />
   </div>
   {{/each}}
   {{initializeCarousel}}

</div>

<template />

P.S：为了完成这项工作，我愿意接受其他方式。

Answer 1

首先确保您使用以下选项之一包含 Flickity 库：

1) 将正确的 JS 引用添加到您的应用程序。例如：

/client/main.html

<head>
  <script src="https://npmcdn.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>
</head>

或

2) 将 Flickity 库的副本嵌入到您的应用程序中。为此，您需要将 flickity.pkgd.js 文件的副本存储在您的应用程序 /client/compatibility 目录中（有关详细信息，请参阅指南的 Special directories 部分）。

或

3) 如果使用 Meteor 1.3+，请使用 npm 安装库：meteor npm install --save flickity

安装库后，不要通过模板助手初始化轮播，而是将初始化代码移动到模板 onRendered 回调中。在该回调中，将您的 flickity 初始化包装在 Tracker.autorun 中，以确保首先加载 Albums 结果。类似于：

Template.carouselTemplate.onCreated(function bodyOnCreated() {
  this.state = new ReactiveDict();
  Meteor.subscribe('albums');
});

Template.carouselTemplate.onRendered(function onRendered() {
  this.autorun(() => {
    if (Albums.find().count()) {
      $('.carousel').flickity();
    }
  });  
});

Template.carouselTemplate.helpers({
  albums() {
    return Albums.find({});
  }
});

通过 onRendered 回调调用它意味着它将在模板准备好并插入 DOM 后调用（jquery 库需要操作 DOM).然后，您可以从模板中删除 initializeCarousel 调用。

流星：数据循环后的启动功能（轮播）

Meteor: Initing function (carousel) after data is was looped

jquery

meteor

flickity