Question

我正在使用带有Backbone的localStorage适配器，并且有一个我存储一些基本设置的设置模型。在init函数中，我创建了像这样的设置模型

window.onload = function() {

    window.settings = new Settings();

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

settings.save({language: lang});

但是它不是替换localStorage中的设置，而是（正如在这个问题Saving a model in local storage的第二个答案中描述的那样）每次只创建一个新的存储项，因此每次设置更改时，都会存储一个新实例。这意味着当我在init之后加载我的视图中的设置时，我必须将语言设置设置为存储阵列中的最后一项

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

            });
    }

但这是非常不切实际的，因为我不想在localstorage中存储设置更改的整个历史记录。作为第一个与之相关的SO答案，我应该在模型上使用id。但是，如果我在应用程序init中分配一个id，就像这样

window.onload = function() {

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

我的应用程序从不渲染，即它永远不会到达此代码中对render函数的调用（我假设它是因为没有记录）。问题：如何在此处调用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();

                });
        }

所以我所做的是在应用程序init中创建模型而不分配id

window.onload = function（）{

    window.settings = new Settings();

然后当我在视图中的初始化程序中调用此模型上的fetch时，我会像这样分配id，以便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, });
                    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适配器与单例资源一起使用并没有多大意义。我建议在Settings Backbone模型中实现sync方法。检查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模型

1 个答案: