使用 localStorage 适配器更新 Backbone 模型

Question

我将 localStorage 适配器与 Backbone 一起使用，并且有一个设置模型，我可以在其中存储一些基本设置。在 init 函数中，我创建了这样的设置模型

window.onload = function() {

    window.settings = new Settings();

如果用户决定更改设置，我会在 updateSettings 函数中执行此操作

settings.save({language: lang});

但它并没有替换 localStorage 中的设置，它（如该问题的第二个答案中所述 Saving a model in local storage）每次都只是创建一个新的存储项，因此每次设置更改时，都会创建一个新实例被存储。这意味着当我在初始化后在我的视图中加载设置时，我必须将语言设置设置为存储数组中的最后一项

s[s.length - 1].language

整个函数看起来像这样

$.when(products.fetch(), settings.fetch())

            .done(function(p, s){
            var l = s[s.length - 1] ? s[s.length - 1].language : 'en-us';                       
                settings.set({'language': l});   
                _this.render();

            });
    }

但这非常不切实际，因为我不想将设置更改的整个历史记录存储在本地存储中。正如链接到的第一个 SO 答案所说，我应该在模型上使用一个 id。但是如果我像这样在应用程序初始化中分配一个 id

window.onload = function() {

    window.settings = new Settings({id: 1});

我的应用程序从不呈现，即它永远不会调用此代码中的呈现函数（我假设这是因为没有记录）。问题：如何在这里调用 fetch

  $.when(products.fetch(), settings.fetch())

                .done(function(p, s){
                var l = s[s.length - 1] ? s[s.length - 1].language : 'en-us';                       
                    settings.set({'language': l});   
                    _this.render();

                });
        }

所以我所做的是在没有分配 id 的情况下在应用程序 init 中创建模型

window.onload = 函数() {

    window.settings = new Settings();

然后当我在视图的初始化程序中调用这个模型的 fetch 时，我像这样分配 id，这样 fetch 总是 returns

   $.when(products.fetch(), settings.fetch())

                .done(function(p, s){
                var l = s[s.length - 1] ? s[s.length - 1].language : 'en-us';                       
                    settings.set({'language': l, });
                    settings.set({id :1 });
                    settings.save();   
                    _this.render();

                });
        }

然后当我像这样更改更新设置功能中的设置时

settings.save({language: lang});

但是，如果我更改设置并刷新页面几次，很明显整个设置历史记录都保存到 localStorage

settings-1: "{"0":{"language":"de",","id":1},"language":"ja","id":1}"

（注意，实际上我保存的不仅仅是语言设置）

问题：如何在 Backbone 模型上设置 ID，以便 localStorage 更新存储中的模型（而不是保留更新历史记录）？

Answer 1

将 localStorage 适配器与单例资源一起使用没有多大意义。我建议在您的设置 Backbone 模型中实施同步方法。查看 Backbone 文档，但通常函数签名是： function(method, model, options) 方法可以是：read, create, update, delete 只需使用 localStorage.getItem 和 localStorage.setItem，像这样的东西应该可以工作：


sync: function(method, model, options) {
  var key = 'settings';
  switch(method) {
    case 'read':
      try {
        data = JSON.parse(localStorage.readItem(key));
        model.set(data);
      } catch(e) {}      
      break;
    case 'update'
    case 'create'
      localStorage.setItem(key, JSON.stringify(model.toJSON()));
      break;
    case 'delete'
      localStorage.setItem(key, null)
  }
}

我没测试过，不过应该是这样的。

使用 localStorage 适配器更新 Backbone 模型

updating a Backbone model with localStorage adapter

backbone.js