1

我正在为我的页面使用无限滚动 jquery 插件。在实现backbone.js 之前，无限滚动在我的页面上运行良好。分页链接由 Laravel PHP 框架创建。

问题：但是在更改代码以使用backbone.js 后，无限滚动功能停止工作。我想知道这是否是由于插件在主干加载视图之前加载，所以插件没有看到任何内容，并认为没有更多元素可以添加到当前页面。如果是这样，我该如何解决这个问题？否则，可能发生了什么？谢谢！

JS代码

// 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>
4

0 回答 0