带有Backbone.js的无限滚动jquery插件

时间:2012-07-05 02:21:11

标签: javascript jquery backbone.js jquery-infinite-scroll

我正在使用infinite scroll jquery plugin作为我的页面。在实现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>

0 个答案:

没有答案