javascript - 来自 Json 文件的 Backbone 集合和本地存储上的缓存

Question

我在主干库里比较新。我正在尝试构建一个基于 backbone + requirejs + jquery-mobile 的移动应用程序。我可以用现有的 json 本地文件填充我的集合。 (将来可能来自远程服务器)。 现在我试图让这个集合只被调用一次，然后将它存储在 localStorage 中以供读取。为此，我正在尝试使用此适配器 ( https://github.com/jeromegn/Backbone.localStorage )，但我不明白如何使用。

示例代码

// models
define([
  'underscore',
  'backbone'
], function(_, Backbone) {
  var AzModel = Backbone.Model.extend({
    defaults: {
      item: '',
      img:"img/gi.jpg"
    },
    initialize: function(){
    }
  });
  return AzModel;
});

// Collection
define(['jquery', 'underscore', 'backbone', 'models/az'], function($, _, Backbone, AzModel) {
    var AzCollection = Backbone.Collection.extend({
     localStorage: new Backbone.LocalStorage("AzStore"), // Unique name within your app.       
    url : "json/azlist.json",
    model : AzModel
    parse : function(response) {
         return response;
    }
});

return AzCollection;
});

define(['jquery', 'underscore', 'backbone', 'collections/azlist', 'text!templates/karate/az.html'], function($, _, Backbone, AzList, AzViewTemplate) {
    var AzView = Backbone.View.extend({
        id:"az",
        initialize: function() {
            this.collection = new AzList(); 
            var self = this;
            this.collection.fetch().done(function() {
                //alert("done")
                self.render();
            }); 

        },
        render : function() {
            var data = this.collection;
            if (data.length == 0) {
                // Show's the jQuery Mobile loading icon
                $.mobile.loading("show");
            } else {
                 $.mobile.loading("hide");
                console.log(data.toJSON());
                  this.$el.html(_.template(AzViewTemplate, {data:data.toJSON()}));
                  // create jqueryui
                 $(document).trigger("create");
            }
            return this;
        }
    });
    return AzView;
});

有人能给我指路吗

Answer 1

Backbone 本地存储适配器覆盖 Collection.sync，当您获取 集合或保存 模型时使用的函数收藏。如果您设置 Collection.localStorage 属性，它会将调用重定向到本地存储而不是服务器。这意味着您可以拥有或 - 读取和写入本地存储或服务器 - 但不能同时拥有两者。

这给你留下了两个选择:

1. 执行初始 fetch，从服务器填充数据，然后才设置 localStorage 属性:

   var self = this;
   
   self.collection.fetch().done(function() {
       self.collection.localStorage = new Backbone.LocalStorage("AzStore");
       self.render();
   }); 
   

2. 像现在一样设置 Collection.localStorage 属性，并使用 Backbone.ajaxSync 手动获取初始数据集，这是给 的别名>Backbone.sync 通过本地存储适配器:

   Backbone.ajaxSync('read', self.collection).done(function() {
       self.render();
   }
   

后一种选择可能更可取，因为它不会阻止您稍后在需要时从服务器加载数据。

您可以非常巧妙地将功能包装为集合中的方法:

var AzCollection = Backbone.Collection.extend({
    localStorage: new Backbone.LocalStorage('AzStore'),
    refreshFromServer: function() {
        return Backbone.ajaxSync('read', this);    
    }    
});

当你想从服务器加载数据时，你可以调用那个方法:

collection.refreshFromServer().done(function() { ... });

而当你想使用本地存储时，你可以使用原生的fetch:

collection.fetch().done(function() { ... });

编辑 以更正示例代码中的错误，以造福路过的谷歌用户。