主干上的无限滚动/分页.js不起作用

我正在尝试使用分页插件作为骨干.js创建一个无限滚动功能，就像在Twitter中一样，单击按钮/链接#pagination a将从后端加载下一页结果并将其附加到当前视图PhotoListView。

问题：我正在尝试遵循此处的插件示例并在此处获取源代码。到目前为止，我设法在单击链接#pagination a时从后端获取data的 JSON 数据。

如何利用 Backbone 的模型-视图绑定.js在单击视图PaginationView中的按钮#pagination a时将新视图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?
        });
    }
});

收集

PhotoCollection = Backbone.Paginator.requestPager.extend({
    model: Photo,
    paginator_core: {
            dataType: 'json',
            url: 'http://www.domain.com/explore/all?'
        },
    paginator_ui: {
        firstPage: 1,
        currentPage: 1,
        perPage: 7,
        totalPages: 10
    },
    server_api: {
        '$page': function() { return this.currentPage; }
    },
    parse: function (response) {
        return response;
    }
});

路由器

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();