javascript - backbone.js 缓存集合和刷新

Question

我有一个可能包含数千个模型的集合。我有一个 View 显示一个表格，每页有 50 行。

现在我希望能够缓存我的数据，这样当用户加载表的第 1 页然后单击第 2 页时，第 1 页(第 01-50 行)的数据将被缓存，这样当用户再次点击第 1 页，backbone 将不必再次获取它。

此外，我希望我的集合能够在不执行 RESET 的情况下从服务器刷新更新的数据，因为 RESET 将删除集合中的所有模型，包括我的应用程序中可能存在的现有模型的引用。是否可以从服务器获取数据，并仅在必要时通过比较现有数据和新到达的数据来更新或添加新模型？

Answer 1

在我的应用程序中，我通过添加一个名为 fetchNew 的新方法解决了重置问题:

app.Collection = Backbone.Collection.extend({

    // fetch list without overwriting existing objects (copied from fetch())
    fetchNew: function(options) {
        options = options || {};
        var collection = this,
            success = options.success;
        options.success = function(resp, status, xhr) {
            _(collection.parse(resp, xhr)).each(function(item) {
                // added this conditional block
                if (!collection.get(item.id)) {
                    collection.add(item, {silent:true});
                }
            });
            if (!options.silent) {
                collection.trigger('reset', collection, options);
            }
            if (success) success(collection, resp);
        };
        return (this.sync || Backbone.sync).call(this, 'read', this, options);
    }

});

这与标准的 fetch() 方法几乎相同，除了检查项目是否存在的条件语句，并且默认使用 add()，而不是重置。与简单地在 options 参数中传递 {add: true} 不同，它允许您检索可能与您已加载的模型重叠的模型集 - 使用 { add: true} 如果您尝试添加相同的模型两次，将抛出错误。

这应该可以解决您的缓存问题，假设您的集合已设置为您可以在 options 中传递某种 page 参数来告诉服务器选项的页面寄回。您可能希望在您的集合中添加某种数据结构来跟踪您加载了哪些页面，以避免执行不必要的请求，例如:

app.BigCollection = app.Collection.extend({

    initialize: function() {
        this.loadedPages = {};
    },

    loadPage: function(pageNumber) {
        if (!this.loadedPages[pageNumber]) {
            this.fetchNew({ 
                page: pageNumber,
                success: function(collection) {
                    collection.loadedPages[pageNumber] = true;
                }
            })
        }
    }

});