使用 localStorage 适配器更新主干模型

Question

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

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

                });
        }

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

window.onload = function() {

    window.settings = new Settings();

然后，当我在视图的初始化程序中对该模型调用 f​​etch 时，我会像这样分配 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 模型中实现同步方法。 检查 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) } }

我没有测试，但应该是这样的。