I am using the infinite scroll jquery plugin for my page. The infinite scroll works fine on my page before implementing backbone.js. Pagination links were created by Laravel PHP framework.
Problem: However after changing the code to make use of backbone.js, the infinite scroll feature stopped working. I wonder if this is due to the plugin loading before backbone loads the views, so the plugin does not see anything and thinks there's no more elements to add to the current page. If so, how can I solve this problem? Otherwise, what may have happened? Thanks!
JS Code
// Routers
var AppRouter = Backbone.Router.extend({
routes: {
'': 'explore'
},
explore: function() {
this.photoList = new PhotoCollection();
var self = this;
this.photoList.fetch({
success: function() {
self.photoListView = new PhotoListView({collection: self.photoList });
self.photoListView.render();
var container = $('#photo_list');
container.infinitescroll({
navSelector : "#pagination", // selector for the paged navigation (it will be hidden)
nextSelector : "#pagination a", // selector for the NEXT link (to page 2)
itemSelector : "#photo_list .photo_box", // selector for all items you'll retrieve
loadingText : 'Loading...'
}, function( newElements ) {
console.log('added!');
var newElems = $( newElements );
container.append(newElems); // this line of code is not tested
}
);
}
});
}
});
var app = new AppRouter();
Backbone.history.start();
HTML
<div id="pagination" style="display: none; ">
<div class="pagination">
<span class="previous_page disabled">« Previous</span>
<span class="current">1</span>
<a href="http://domain.com/explore?page=2">2</a>
<a href="http://domain.com/explore?page=3">3</a>
<a href="http://domain.com/explore?page=4">4</a>
<a href="http://domain.com/explore?page=5">5</a>
<a href="http://domain.com/explore?page=2" class="next_page">Next »</a>
</div>
</div>