Question

我在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());
}

来自console.log(Date.now())的{{1}}出现在onRendered之前...我该如何解决而又不能在我的{{1}中添加难看的showTime }？

再次感谢。

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无法正确初始化

1 个答案: