using backbone localStorage on a nested Collection

Question

I'm trying to implement nested Collections exactly like the example I found here: https://stackoverflow.com/a/17453870/295133

The only difference being is that I'm trying to store the data locally using the localStorage plugin.

Here, my Lists would be the Hotels in the example above:

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



})();

What the localStorage does is stores the ListModels, but if I add anything to the words collection it soon disappears after I refresh.

Any ideas how I should be saving the entire nested collection?

Answer 1

So got this working and it came down to something in parse but also if you want to ensure you just get the attributes out of your nested collection you should override the toJSON otherwise you get the full collection in what this returns.

  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;
  };

The main thing that was breaking is in the parse. Is assigns words directly to the model,

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

but this means that it will not show up when toJSON is called as it is not in the attributes (it also means you can't access it via model.get)

so this should be changed to

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;
    }

this way it is added to the attributes of the model on not directly on the model. If you look at this fiddle http://jsfiddle.net/leighking2/t2qcc7my/ and keep hitting run it will create a new model in the collection, save it in local storage then print the results to the console. each time you hit run you should see it grow by 1 (as it gets the previous results local storage) and contain the full information that you want.