сброс и повторная инициализация infiniteScroll? - PullRequest
Новая
       12

сброс и повторная инициализация infiniteScroll?

0 голосов
/ 21 февраля 2019

Вот страница, где я использую infiniteScroll - https://kitchens.chapterserver1.co.uk/kitchen-style/shaker-kitchens/

Фильтры в верхней части запускают событие hashchange, которое запускает jquery для повторной загрузки блоков на странице.В конечном итоге это будет иметь гораздо больше фильтров, но это только для тестирования прямо сейчас.

InfiniteScroll загружает в json, используя метод, показанный здесь: https://codepen.io/desandro/pen/LLjYgG/

Мне нужно сбросить и повторно инициализироватьInfiniteScroll, когда я использую фильтры (или когда есть изменение хеша, вызванное использованием кнопки «Назад» и т. д.), и я не могу понять, как это сделать.Вот соответствующие биты кода:

Эта функция вызывается при загрузке страницы и хэш-обмене: 

function render_kitchens() {
    let $container = $('.kitchen-tiles');

    emptyContainer();

    let data = {
        action: 'kitchens_load',
        paged: $('.kitchen-tiles').data('paged'),
        posts_per_page: $('.kitchen-tiles').data('pp-page'),
    }

    let hash = getHashParams();

    if($.isEmptyObject(hash)){
        let $kitchen_tiles = $('.kitchen-tiles');
        let style = $kitchen_tiles.data('type');

        if(style!==''){
            data.style = style;
        }
    }else{
        data.style = hash.style;
    }


    $.ajax({
        // eslint-disable-next-line no-undef
        url: ajax_object.ajax_url,
        type: 'POST',
        data: data,
        dataType: 'json',
        // eslint-disable-next-line no-unused-vars
        success: function(response){
            let itemTemplateSrc = $('#kitchen-item-template').html();
            $.each(response.kitchens, function(i, val){
                let itemHTML = getItemHTML(itemTemplateSrc, val);
                $container.append(itemHTML);
            });
            setupInfScr();
        },
    });
}

Функция для настройки бесконечной прокрутки, вызываемая в success функции выше: 

function setupInfScr(){

    let $elem = $('.kitchen-tiles');
    let jQueryBridget = require('jquery-bridget');
    jQueryBridget( 'infiniteScroll', InfiniteScroll, $ );

    let $container = $elem.infiniteScroll({
        path: function () {
            return '/wp-admin/admin-ajax.php?action=kitchens_load&posts_per_page=3&paged=' + (this.pageIndex + 1) + '&style=' + $elem.data('type');
        },
        responseType: 'json',
        history: false,
    });

    $container.on('load.infiniteScroll', function(event, response){
        // parse response into JSON data
        let itemTemplateSrc = $('#kitchen-item-template').html();
        $.each(response.kitchens, function(i, val){
            let itemHTML = getItemHTML(itemTemplateSrc, val);
            $container.append(itemHTML);
        });
    });
}

Функция для очистки контейнера: 

function emptyContainer(){
    let $container = $('.kitchen-tiles');
    $container.empty();
}

Я попробовал несколько вещей внутри функции seuptInfScr, как например, уничтожить и установить нулевые данные, но на самом деле ничего не работает.Если вы запустите пример и посмотрите на консоль, параметр paged в URL-адресе, из которого вызывается JSON, не будет сброшен при нажатии фильтра.Какой мой подход должен быть здесь?

Большое спасибо Кевин

...