backbone.js缓存集合和刷新 [英] backbone.js cache collections and refresh

问题描述

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

I have a collection that can potentially contain thousands of models. I have a view that displays a table with 50 rows for each page.

现在我希望能够缓存我的数据，以便当用户加载第1页的表格然后点击第2页，第1页的数据（行＃01-50）将被缓存，以便当用户再次点击第1页时，骨干网不必再次获取它。

Now I want to be able to cache my data so that when a user loads page 1 of the table and then clicks page 2, the data for page 1 (rows #01-50) will be cached so that when the user clicks page 1 again, backbone won't have to fetch it again.

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

Also, I want my collection to be able to refresh updated data from the server without performing a RESET, since RESET will delete all the models in a collection, including references of existing model that may exist in my app. Is it possible to fetch data from the server and only update or add new models if necessary by comparing the existing data and the new arriving data?

推荐答案

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

In my app, I addressed the reset question by adding a new method called 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（），而不是 reset 。与在选项参数中简单传递 {add：true} 不同，它允许您检索可能重叠的模型集使用已经加载的内容 - 如果您尝试将相同的模型添加两次，则使用 {add：true} 将引发错误。

This is pretty much identical to the standard fetch() method, except for the conditional statement checking for item existence, and using add() by default, rather than reset. Unlike simply passing {add: true} in the options argument, it allows you to retrieve sets of models that may overlap with what you already have loaded - using {add: true} will throw an error if you try to add the same model twice.

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

This should solve your caching problem, assuming your collection is set up so that you can pass some kind of page parameter in options to tell the server what page of options to send back. You'll probably want to add some sort of data structure within your collection to track which pages you've loaded, to avoid doing unnecessary requests, e.g.:

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

}); 

这篇关于backbone.js缓存集合和刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！