Question

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

/ api / transactions / =＆gt;第1页（10项默认限制） / api / transactions /？p = 2 =＆gt;第2页

我想用Backbone视图构建一个无限滚动系统。

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

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页）行？

我有点困惑。

Answer 1

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

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

在您看来：

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

要仅渲染新模型，您可以使用指定的属性返回它们，例如额外属性“page”。按此属性过滤它们并发送到报告者。

简单的Backbone.js集合无限分页

1 个答案: