Question

我正试图通过启动火焰助手来制作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（操作DOM的jquery库所需）之后调用。然后，您可以从模板中删除initializeCarousel来电。

Meteor：数据循环后的Initing函数（轮播）

1 个答案: