Flickity не инициализируется должным образом, когда данные поступают из ReactiveVar - PullRequest
Новая
       62

Flickity не инициализируется должным образом, когда данные поступают из ReactiveVar

0 голосов
/ 12 апреля 2019

Я использую 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());
}

* * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * *1040* * * * * * * * * * * * * * * * * console.log(Date.now()) * * * * * * * * * * * * * * *1040* появляется перед showTime 's ... Как я мог решить это, не добавляя уродливый setTimeout() в мой onRendered? *1040*

Еще раз спасибо.

1 Ответ

0 голосов
/ 12 апреля 2019

Мне удалось решить проблему.

Задавая здесь вопрос, я задал себе несколько других вопросов, и вот окончательное решение: 

{{#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);
    }
});

Я надеюсьэто поможет кому-то еще:)

...