Consentire infinitescroll.js di eseguire X volte, quindi caricare più post

Question

Sto usando lo script infinitescroll.js e funziona davvero bene. Ho trovato il modo di sostituire la funzionalità predefinita con un pulsante load more, utilizzando questo codice:

$(window).unbind('.infscr'); 
$('.js-next-reports').click(function() { 
    $grid.infinitescroll('retrieve'); 
    return false; 
}); 
$(document).ajaxError(function(e, xhr, opt) { 
    if (xhr.status == 404) $('.js-next-reports').remove(); 
}); 

Tuttavia, quello che mi piacerebbe fare è permettere infinita di scorrimento per eseguire 3/4 volte e poi mostrare il .js-next-reports pulsante. Non sono sicuro di come tenere traccia di quante volte lo scorrimento infinito è stato eseguito. So che c'è un var currPage ma usando console.log non riesco a capire come posso fare riferimento.

C'è anche un'opzione maxPage per infinitescroll, che limita l'esecuzione di solo X volte, quindi potrei forse sfruttarla in qualche modo? Non sono sicuro di come ottenere un console.log delle opzioni però. Ecco il mio codice init se questo aiuta ($ grid è solo un riferimento a un div)

$grid.infinitescroll({ 

    // selector for the paged navigation (it will be hidden) 
    navSelector : ".pagination", 
    // selector for the NEXT link (to page 2) 
    nextSelector : ".pagination .next", 
    // selector for all items you'll retrieve 
    itemSelector : ".infinite-scroll-post", 
    contentSelector : "#infinite-scrollable", 
    debug: true, 

    // finished message 
    loading: { 
     img: "ajax-loader.gif", 
     msgText: "Loading more projects...", 
     finishedMsg: 'No more pages to load.', 
     } 
    }, 

}); 

Forse qualcosa come:?

if (.currPage == "3") { 
    $(window).unbind('.infscr'); 
    $('.js-next-reports').click(function() { 
     $grid.infinitescroll('retrieve'); 
     return false; 
    }); 
    $(document).ajaxError(function(e, xhr, opt) { 
     if (xhr.status == 404) $('.js-next-reports').remove(); 
    }); 
} 

Ma io non so come sia contare i rotoli o l'accesso currPage.

Grazie

Answer 1

Un JSFiddle aiuterebbero testare il codice, ma da quello che ho letto sul loro documentazione, c'è un callback che permette di accedere currPage all'interno dell'oggetto Stato. Il tuo codice dovrebbe apparire in questo modo:

$grid.infinitescroll({ 

    // selector for the paged navigation (it will be hidden) 
    navSelector : ".pagination", 
    // selector for the NEXT link (to page 2) 
    nextSelector : ".pagination .next", 
    // selector for all items you'll retrieve 
    itemSelector : ".infinite-scroll-post", 
    contentSelector : "#infinite-scrollable", 
    debug: true, 

    // finished message 
    loading: { 
     img: "ajax-loader.gif", 
     msgText: "Loading more projects...", 
     finishedMsg: 'No more pages to load.', 
    }, 
    appendCallback: false 
    }, function(newitems, opts) { 
     if(opts.state.currPage == 3) { 
      $(window).unbind('.infscr'); 
     } 
    } 
});