当数据来自 ReactiveVar 时，Flickity 无法正确初始化

Question

我正在将 flickity 与 Meteor 一起使用，我正在尝试从来自 ReactiveVar 的数组制作轮播，如下所示：

Template.quickAnalyse.onRendered(function() {
    this.autorun(() =>{
        if (Template.instance().configuredSites.get() != undefined) {
            console.log(Date.now());
            $('.index-carousel').flickity({
                cellAlign: 'center',
                contain: true,
                setGallerySize: false,
                groupCells: true
            });
        }
    });
});

Template.quickAnalyse.helpers({
    getConfiguredSites() {
        console.log(Template.instance().configuredSites.get());
        console.log(Date.now());
        return Template.instance().configuredSites.get();
    },
});

console.log(Date.now()) 告诉我 getConfiguredSites() 助手在轮播初始化之前运行，所以它应该可以工作。

问题是我的旋转木马单元格未在 flickity-viewport 中呈现。

看起来像这样：https://postimg.cc/s1tF07mP

但是，当我像这样返回数据时：

Template.quickAnalyse.helpers({
    getConfiguredSites() {
        console.log(Template.instance().configuredSites.get());
        console.log(Date.now());
        return [{site: "1", installation: "1", batiment: "1"}, {site: "2", installation: "2", batiment: "2"}, {site: "3", installation: "3", batiment: "3"}]
    },
});

结果如下：https://postimg.cc/vgZzzqCY

首先，我认为助手和初始化之间的时间，在第一种情况下，很短，但在第二种情况下甚至更短，而且它正在工作。所以问题可能来自其他地方，但我无法弄清楚。

我唯一想到的是，也许 Template.instance().configuredSites.get() 需要很长时间。

我该如何解决这个问题？

谢谢。

编辑：在测试了我的最后一个理论之后，像这样：

{{#each getConfiguredSites}}
    {{showTime}}
    <div class="carousel-cell">
        <div class="card index-card">
            <div class="card-body">
                <p>{{this.site}}</p>
                <p>{{this.installation}}</p>
                <p>{{this.batiment}}</p>
            </div>
        </div>
    </div>
{{/each}}

和

showTime() {
    console.log(Date.now());
}

onRendered 中的 console.log(Date.now()) 出现在 showTime 中的 showTime 之前...我怎样才能解决这个问题而不在我的 [= 中添加丑陋的 setTimeout() 19=] ?

再次感谢。

Answer 1

我已经解决了这个问题。

在这里问这个问题让我问了自己一些其他问题，这是最终的解决方案：

{{#with getConfiguredSites}}
    {{#each this}}
        <div class="carousel-cell col-xl-2">
            <div class="card index-card">
                <div class="card-body">
                    <p>{{this.site}}</p>
                    <p>{{this.installation}}</p>
                    <p>{{this.batiment}}</p>
                </div>
            </div>
        </div>
        {{#if isLast .. @index}}
            {{initializeCarousel}}
        {{/if}}
    {{/each}}
{{/with}}

Template.quickAnalyse.onRendered(function() {
    this.autorun(() => {
        if (Template.instance().readyForCarousel.get() === true) {
            $('.index-carousel').flickity({
                cellAlign: 'center',
                contain: true,
                setGallerySize: false,
                groupCells: true
            });
        }
    });
});

Template.quickAnalyse.helpers({
    getConfiguredSites() {
        return Template.instance().configuredSites.get();
    },

    isLast(data, index) {
        if (index + 1 == data.length)
            return true;
        return false;
    },

    initializeCarousel() {
        Template.instance().readyForCarousel.set(true);
    }
});

希望对其他人有所帮助:)

当数据来自 ReactiveVar 时，Flickity 无法正确初始化

Flickity not initializing properly when data comes from ReactiveVar

html

node.js

carousel

meteor

flickity