1

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>
John Slegers
  • 38,420
  • 17
  • 182
  • 152
Nyxynyx
  • 52,075
  • 130
  • 401
  • 707
  • Did u get solution for this? facing same problem with iscroll plugin, please let me know. – atluriajith Oct 12 '12 at 10:22
  • hey just for information.. its good to use require.js for loading js files in a orderly manner... by default you can avoid many such problems and conflicts .... – troy Sep 03 '13 at 11:29

0 Answers0