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所做的是存储ListModels，但是如果我在单词集合中添加任何内容，它会在刷新后很快消失。

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

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（因为它获得了以前的结果本地存储）并包含您想要的完整信息。

在嵌套Collection上使用骨干localStorage

1 个答案: