Javascript Simple Backbone.js集合无限分页

我的服务器端api遵循经典的结果分页模型，例如

/api/交易/=>第1页（10项默认限额） /api/transactions/？p=2=>第2页

我想构建一个具有主干视图的无限滚动系统

我已经设置了非分页集合+视图。父视图如下所示：

Backbone.View.extend({

    initialize: function() {

        this.collection = TransactionCollection;
        this.fetch();

        this.listenTo( this.collection, 'reset', this.renderEntries );
        this.listenTo( this.collection, 'add', this.fetch );

        this.rowViews = [];
        this.render();
    },

    fetch: function() { 
        this.collection.fetch({ reset:true });
    },

    render: function() {

        this.$el.html( template() );
        this.renderEntries();

        return this;
    },

    renderEntries: function() {
        this.clearEntryRows();
        this.collection.each(function(item) {
            var row = new TransactionItemView( item );
            this.rowViews.push( row );
            this.$el.find('.entry-list').append( row.render().el );
        }, this);
    },

    clearEntryRows: function() {
        this.rowViews.forEach(function(v) {
            if (v.close) v.close();
        });
        this.rowViews = [];
    },

// ...
}

这是视图代码的相关部分（子视图是简单的项目视图，使用模板呈现它们自己）

该系列仍然非常基本：

var TransactionCollection = Backbone.Collection.extend({
    model: Transaction,
    url: '/api/transactions'
});

现在是添加分页的时候了。我想我会在每次renderEntries（）调用之后添加一个按钮“MORE…”。该按钮将获取下一页（不重置集合），并调用另一个renderEntries。this.clearEntryRows（）将被移动到重置回调

我的问题是：如何获取第二个页面并添加模型，而不重置集合并截获该事件，以呈现下一个条目页面？ 我读过一些关于“sync”事件的内容：据我所知，“reset”仅在我使用reset:true进行提取时才会被激发；无论如何，每次提取集合时，“sync”都会被激发

所以，如果这是正确的，我只能在重置事件时清除条目行，并同步显示行。但是如何仅显示列表中新添加的行（如第2页）

我有点困惑

this.collection.fetch({ add: true, remove: false, merge: false, data: {p: 2} });

这允许您使用指定的get参数进行提取，并且只将不存在的条目添加到集合中

在你看来：

initialize: function () {
    this.listenTo(this.collection, 'add', handlerForRenderingNewEntries);
} 

---

若要仅呈现新模型，可以使用指定的属性返回它们，例如额外的属性“page”。按此属性筛选它们并发送给rendrer。

在这种情况下，我认为您可以只使用

add

事件，而不是

reset

并将新项目附加到容器中。