在嵌套集合上使用主干 localStorage

Question

我正在尝试实现嵌套集合，就像我在此处找到的示例一样：https://stackoverflow.com/a/17453870/295133

唯一的区别是我尝试使用 localStorage 插件在本地存储数据。

在这里，我的列表将是上面示例中的酒店：

var app = app || {};


(function (){
    'use strict';

    // List Collection - list of words
    //---------------------

    var listCollection = Backbone.Collection.extend({
        //referebce to this collection's model
        model: app.ListModel,
        localStorage: new Backbone.LocalStorage('translate-lists')


    });


    app.listCollection = new listCollection();


})();



(function (){
    'use strict';

    app.ListModel = Backbone.Model.extend({

         initialize: function() {
            // because initialize is called after parse
            _.defaults(this, {
                words: new app.wordCollection
            });
        },
        parse: function(response) {
            if (_.has(response, "words")) {
                this.words = new app.wordCollection(response.words, {
                    parse: true
                });
                delete response.words;
            }
            return response;
        }
    });



})();

localStorage 的作用是存储 ListModel，但如果我在 words 集合中添加任何内容，刷新后它很快就会消失。

任何想法我应该如何保存整个嵌套集合？

Answer 1

所以得到了这个工作，它归结为解析中的一些东西，但如果你想确保你只是从嵌套集合中获取属性，你应该覆盖 toJSON 否则你会在返回的内容中获得完整的集合。

  Backbone.Model.prototype.toJSON = function() {
    var json = _.clone(this.attributes);
    for (var attr in json) {
      if ((json[attr] instanceof Backbone.Model) || (json[attr] instanceof Backbone.Collection)) {
        json[attr] = json[attr].toJSON();
      }
    }
    return json;
  };

主要的问题在于解析。是直接将单词分配给模型，

this.words = new app.wordCollection(response.words, {
                    parse: true
                });

但这意味着它不会在调用 toJSON 时显示，因为它不在属性中（这也意味着您无法通过 model.get 访问它）

所以应该改成

initialize: function () {
        // because initialize is called after parse
        _.defaults(this.attributes, {
            words: new app.WordCollection()
        });
    },
    parse: function (response) {
        if (_.has(response, "words")) {
            this.attributes.words = new app.WordCollection(response.words, {
                parse: true
            });
            delete response.words;
        }
        return response;
    }

这样它就被添加到模型的属性上而不是直接在模型上。如果您查看此小提琴http://jsfiddle.net/leighking2/t2qcc7my/ 并继续点击运行，它将在集合中创建一个新模型，将其保存在本地存储中，然后将结果打印到控制台。每次你点击运行时，你应该会看到它增长 1（因为它会在本地存储以前的结果）并包含你想要的完整信息。