单击时使用新的 URL 链接重新绑定无限滚动插件

Question

所以我有一个这样的案例，我想在单击的链接上重新绑定无限滚动插件并传递新的 URL 以区分稍后将由它生成的内容部分..

到目前为止，我能做的是触发无限滚动并在第一个单击的链接处传递该部分。之后，当我单击另一个链接时，URL 链接或该部分将不会被重新绑定，我希望它被重新绑定所以它可以改变生成的内容。

这里是我的代码..

HTML

<li class="active"><a href="#" title="" data-filter=".w-all" class="w-filter">View All</a></li>
        <li><a href="#" title="" data-filter=".w-branding" class="w-filter">Branding</a></li>
        <li><a href="#" title="" data-filter=".w-graphic" class="w-filter">Graphic</a></li>
        <li><a href="#" title="" data-filter=".w-website" class="w-filter">Website</a></li>
        <li><a href="#" title="" data-filter=".w-photography" class="w-filter">Photography</a></li>

jQuery

$('a.w-filter').click(function(e){
    var selector = $(this).attr('data-filter');
    var section = selector.split('-');
    $('#page_nav a').attr('href', 'pager/1/'+section[1]);


    $(window).unbind('.infscr');

    $container.infinitescroll({  
        navSelector : '#page_nav',
        nextSelector : '#page_nav a',
        itemSelector : '.item',
        loading: {      
            finishedMsg: 'Hmm, I guess that\'s all we got.',    
            img: 'loading.gif',    
            msgText: '<em>Loading more projects.</em>'   
        },
        pathParse: function (path, currentPage) {
          var chunkedUrl = ['/pager/', '/'+section[1]];
          return chunkedUrl;
        }


    });

    $container.infinitescroll('retrieve');


    e.preventDefault();
});

可以吗？

Answer 1

终于，我在Infinite scroll plugin modify the path with custom query找到了答案

它必须稍微修改一下插件源，然后它就像一个魅力！

//line 67
$.infinitescroll.prototype = {
   //My custom parameters
    pageType: "&type=items",
    categoryParam: "&category=shoes",
    /*  
        ----------------------------
        Private methods
        ----------------------------
        */

谢谢老哥..

我再次发现了一些关于此的问题.. 因此，当任何部分返回 0 结果时，插件将调用破坏实例的“结束”函数，然后当我单击任何链接时，插件将不再触发事件。我尝试使用它的'bind'函数重新绑定实例，但没有运气，它的'retrieve'函数只调用完成的消息文本，即前一个实例被销毁之前的最后状态。我仍然无法让它重新绑定一个新实例..

这是我做的唯一选择，n还需要修改插件源.. 当一个部分返回 0 结果时它不会调用 'end' 函数，但插件不会再显示完成的文本消息。

// near line 356, put comments tag before if(children.length === 0) to its closing brackets

// if it didn't return anything
/*if (children.length === 0) {
    return this._error('end');
}*/

// use a documentFragment because it works when content is going into a table or UL
frag = document.createDocumentFragment();

仍然希望有人可以帮助以正确的方式解决此问题..

Answer 2

试试$container.infinitescroll('destroy')。如果您使用的是2.0 version from github，它应该可以工作（至少我可以通过查看源代码来判断）。