Question

这是我使用infiniteScroll的页面-https://kitchens.chapterserver1.co.uk/kitchen-style/shaker-kitchens/

顶部的过滤器触发一个hashchange事件，该事件触发jquery重新加载页面上的块。最终，它将有更多的过滤器，但这仅用于测试。

InfiniteScroll使用下面显示的方法加载到json中：https://codepen.io/desandro/pen/LLjYgG/

当我使用过滤器时（或由于使用后退按钮等导致哈希变化时），我需要重置并重新初始化infiniteScroll，但我不知道该怎么做。以下是相关的代码位：

此函数在页面加载和hashchange上调用：

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函数中的一些操作，例如销毁数据并将其设置为null，但实际上没有任何效果。如果运行示例并查看控制台，则在单击过滤器后，从中调用JSON的URL中的paged参数不会重置。我的方法应该在这里？

非常感谢凯文

重置并重新初始化infiniteScroll？

0 个答案: