javascript - 使用 Pagination.client Pager 从服务器加载附加模式

Question

我正在尝试使用 Paginator.clientPager 进行初始获取后从服务器加载其他模式

这是我的收藏，几乎是从 github 上的示例代码复制粘贴的。

return new (Backbone.Paginator.clientPager.extend({
    model: model,
    paginator_core: {
        type: 'GET',
        dataType: 'json',
        url: '/odata/LibraryFile'
    },

    paginator_ui: {
        // the lowest page index your API allows to be accessed
        firstPage: 1,

        // which page should the paginator start from
        // (also, the actual page the paginator is on)
        currentPage: 1,

        // how many items per page should be shown
        perPage: 2,

        // a default number of total pages to query in case the API or
        // service you are using does not support providing the total
        // number of pages for us.
        // 10 as a default in case your service doesn't return the total
        totalPages: 5
    },

    server_api: {
        // number of items to return per request/page
        '$skip': function () { return this.perPage * (this.currentPage - 1) },
        '$top': function () { return this.perPage },
    },

    parse: function (response) {
        console.log(response);
        return response.value;
    }
}))();

我像这样调用初始获取

myCollection.fetch({
    success: function(){
        myCollection.pager();
    },
    silent:true
});

然后，在用户使用 clientPager 浏览本地页面后，他可能想要加载更多页面，而不删除第一页。

我尝试这样实现这一点，但由于某种原因，在我调用 pager(); 后，两条新记录被删除。

myCollection.currentPage = 2;
myCollection.fetch({
    success: function(){ 
        console.log(myCollection.length) // 4 models, with correct data
        myCollection.pager();
        console.log(myCollection.length) // the 2 new records are removed
    },
    silent:true,
    remove: false // don't remove old records
});

我做错了什么，如何使用 Paginator.clientPager 加载另外 2 页？

我不想使用 requestPager，因为那样我就无法在内存中进行预缓存，至少我认为是这样。

Answer 1

根据我的经验，这是由 Backbone.Paginator.clientPager 的 pager() 方法引起的。您可以在这里查看代码: Backbone.Paginator.clientPager

第 292 行到第 294 行显示 Backbone.Paginator.clientPager.origModels 仅分配给当前模型(您在插图中正确测试了其长度的模型)上面)如果未定义。问题是，当用户可能想要加载更多页面而不删除第一个页面时，origModels 属性可能已经被设置为初始获取的结果。

这意味着您必须再次显式地使 origModels 未定义，然后 pager() 才会按照您的意愿行事。请注意源代码第 296 行稍后发生的情况(模型被分配给 origModels 的副本)。这就是您的两条新记录被删除的原因。以下代码应该按您的预期工作:

myCollection.currentPage = 2;
myCollection.fetch({
    success: function(){ 
        delete myCollection.origModels; // to ensure that origModels is overridden in pager() call below
        myCollection.pager();
    },
    silent:true,
    remove: false // don't remove old records
});