Javascript backbone.js上的无限滚动/分页不工作

我试图使用for backbone.js创建一个无限滚动功能，就像在Twitter中一样，单击按钮/链接

#分页a

将从后端加载下一页结果，并将其附加到当前视图

PhotoListView

问题：我正在尝试遵循插件的示例和源代码。到目前为止，我通过单击链接

#pagination a

从后端获取JSON数据

数据

单击视图
PaginationView
中的按钮
#pagination a
时，如何利用backbone.js的模型视图绑定将新视图
photoListItemView
附加到视图
photoListView

我认为当调用
paginationView
中
appendRender
方法的
this.collection.requestNextPage（）
时，新检索的模型将添加到集合
photoCollection
中，该集合将触发
photoListView
的
this.collection.bind（'change'，this.render，this）事件触发器，导致追加新检索的模型

视图

PhotoListView = Backbone.View.extend({
    el: '#photo_list',

    initialize: function() {
        this.collection.bind('change', this.render, this);
        this.collection.bind('add', function() {
            console.log('added to collection');
        }, this);
    },

    render: function() {
        //$(this.el).html('');
        this.collection.each(function(photo, index) {
            if(index % 7 < 3) {
                $(this.el).append(new PhotoListItemView({ model: photo }).render().el);
            } else {
                $(this.el).append(new PhotoListQuadItemView({ model: photo }).render().el);
            }
            console.log('render');
        }, this);
        return this;
    }
});

PhotoListItemView = Backbone.View.extend({
    tagNAme: 'div',
    className: 'photo_box',

    template: _.template( $('#tpl_PhotoListItemView').html() ),

    initialize: function() {
        this.model.bind('destroy', this.close, this);
    },

    render: function() {
        $(this.el).html( this.template( this.model.toJSON() ) );
            console.log('render item');
        return this;
    },

    close: function() {
        this.unbind();
        this.remove();
    }
});

PhotoListQuadItemView = Backbone.View.extend({
    tagNAme: 'div',
    className: 'photo_box',

    template: _.template( $('#tpl_PhotoListQuadItemView').html() ),

    initialize: function() {
        this.model.bind('destroy', this.close, this);
    },

    render: function() {
        $(this.el).html( this.template( this.model.toJSON() ) );
        return this;
    },

    close: function() {
        this.unbind();
        this.remove();
    }
});

PaginationView = Backbone.View.extend({
    el: $('#pagination'),

    events: {
        'click #pagination a': 'appendRender'
    },

    initialize: function() {
        this.render();
    },

    template: _.template( $('#tpl_pagination').html() ),

    render: function() {
        $(this.el).html( this.template() );
    },

    appendRender: function() {
        this.collection.requestNextPage()
            .done(function(data, textStatus, jqXHR) {
                // HOW DO I APPEND THE NEW DATA VIEWS?
        });
    }
});

路由器

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'explore'
    },

    initialize: function() {

    },

    explore: function() {
        console.log('explore!');
        this.photoList = new PhotoCollection();
        this.paginationView = new PaginationView({ collection: this.photoList });
        var self = this;
        this.photoList.fetch({
            success: function() {
                self.photoListView = new PhotoListView({ collection: self.photoList });
                self.photoListView.render();

            }
        });
    }

});

var app = new AppRouter();
Backbone.history.start();

正如基肖尔所说。绑定到
重置

事件，它现在可以工作。

正如Kishore所说。绑定到

reset

事件，它现在可以工作。

现在，您的照片列表视图如何知道已单击分页视图？您需要将事件绑定到视图，以便在获取任何集合时将视图绑定到重置事件，并呈现视图automatically@Kishore我将它绑定到重置事件而不是更改事件，现在它运行良好。谢谢现在，您的PhotoListView如何知道已单击PaginationView？您需要将事件绑定到视图，以便在获取任何集合时将视图绑定到重置事件，并呈现视图automatically@Kishore我将它绑定到重置事件而不是更改事件，现在它运行良好。谢谢

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'explore'
    },

    initialize: function() {

    },

    explore: function() {
        console.log('explore!');
        this.photoList = new PhotoCollection();
        this.paginationView = new PaginationView({ collection: this.photoList });
        var self = this;
        this.photoList.fetch({
            success: function() {
                self.photoListView = new PhotoListView({ collection: self.photoList });
                self.photoListView.render();

            }
        });
    }

});

var app = new AppRouter();
Backbone.history.start();