在backbone.js 中缓存集合？

Question

确保我的集合保持缓存并仅获取一次的最佳方法是什么？

我应该实现某种缓存层吗？我应该将 Collection 变量共享到需要的地方吗？我可以信任 jQuery 的 AJAX 设置吗？ ($.ajaxSetup ({ cache: true });)

现在看起来的基本集合：

theCollection = Backbone.Collection.extend({
    model: theModel,
    url: "source.json"
});

if (typeof myCollection === 'undefined') {
    var myCollection = new theCollection; // Only allow it to be created once
}

Answer 1

我会在您的情况下实现一种集合管理器：

var manager = (function(){

  var constructors = {
    'example': ExampleCollection
  };
  var collections = {};

  return {
    getCollection: function(name) {
      if(!collections[name]) {
        var collection = new constructors[name]();
        collection.fetch();
        collections[name] = collection;
      }
      return collections[name];
    }
  }
})();

这里管理器负责实例化集合并获取它们。当您调用时：

var exampleCollection = manager.getCollection('example');

您将获得示例集合的实例，其中数据已被获取。每当您再次需要此集合时，您可以再次调用该方法。然后您将获得完全相同的实例，无需再次获取它。

这只是一个非常简单的管理器示例，您可以实现和增强许多附加功能。

我强烈建议不要在较低级别上处理这个问题（例如 $.ajax 的传输层）。如果这样做，您将阻止多次获取您的集合，但最终您的应用程序中会出现具有相同 id 的不同模型实例。每个集合实例都会创建它自己的模型。

在我目前正在开发的 CouchApp 中，我还发现有必要防止不同集合中的重复模型实例（不同的数据库视图可以返回相同的模型数据）。这个问题已通过在管理器中建立一个单独的集合来解决，该集合跟踪已加载到应用程序中的所有模型。

最后但并非最不重要的一点是，您可能会考虑在集合或管理器中实现刷新方法，以处理从服务器更新集合的情况。如果您使用 fetch 方法执行此操作，您的整个集合将被重置，因此所有模型都会被销毁，然后重新创建。如果您在应用程序的其他地方引用了该集合中的模型（就像您通常所做的那样），那么这很糟糕。这些实例已过时并在您的应用程序中重复。刷新方法检查当前集合中是否已存在具有传入 id 的实例。如果是，则更新它们，否则添加它们。

Answer 2

如果缓存实际上是指单例，以便您可以在模块化 JS 应用程序中的多个位置引用相同的域列表，我们使用 RequireJS 为此。您可以将集合分离为应用程序中的一个模块，然后无论您在哪里使用它都需要它。用伪代码表示：

require(["myCollection"],
    function(myCollection) {
        var MyView = Backbone.View.extend();
        new MyView({
            collection: myCollection
        }).render();
    }
);

您的回调函数将始终获得与定义 myCollection 模块时返回的相同实例。从所有视图绑定到该实例，每当刷新时，这些视图都会获得事件触发器并可以自行更新。

Answer 3

您可以尝试将您的收藏保存在 localStorage 中。这是链接（ http://documentcloud.github.com/backbone/#examples-todos< /a>）。

该应用程序使用 LocalStorage 适配器透明地将所有待办事项保存在浏览器中，而不是将它们发送到服务器。

我希望它有帮助:)

Answer 4

一个简单的解决方案是为您的集合创建一个全局变量，以便所有 javascript 代码都将使用相同的变量。

只需在页面加载时获取集合

$(function() {
  myCollection = theCollection();
  myCollection.fetch();
});

由于 var 没有用于声明 myCollection，那么它就成为全局变量。

当然，这是一个简单的实现。有更强大的实现，但根据您的需求，它们可能有点矫枉过正。

Answer 5

我最终做了类似于 ProTom 的解决方案。我决定只使用一个函数来设置集合，而不是根据名称动态初始化集合。通过我的应用程序，我需要根据集合的来源以不同的方式初始化集合。事实证明这是满足我需求的最佳方式。这是 CoffeeScript：

缓存：

cachedCollections: {}
getCollection: (key, block) ->
  collection = @cachedCollections[key]
  return collection if collection
  collection = block()
  @cachedCollections[key] = collection
  collection

用法：

commentCollection = getCollection "comments-#{postId}", ->
  collection = new CommentCollection
  collection.url = "/api/posts/#{postId}/comments"
  collection

Answer 6

您可以尝试

https://github.com/mrappleton/backbone-fetch-cache

它还具有过期支持，可以轻松设置缓存的最大时间。