当数据来自 ReactiveVar 时，Flickity 未正确初始化答案

【问题标题】：Flickity not initializing properly when data comes from ReactiveVar当数据来自 ReactiveVar 时，Flickity 未正确初始化
【发布时间】：2019-09-03 00:24:18
【问题描述】：

我正在将 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 之前...如果不在我的onRendered 中添加丑陋的setTimeout()，我怎么能解决这个问题？

再次感谢。

【问题讨论】：

标签： html node.js meteor carousel flickity

【解决方案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);
    }
});

我希望它会帮助别人:)

【讨论】：