Converting JSON data to Backbone Model with child Collection

Question

I am working with a Playlist object which has some properties defining itself as well as a PlaylistItem collection.

When I receive data from my server, I get its JSON response in my client-side success method:

success: function (data) {
    console.log("JSON data:", data);

    playlists = _.map(data, function (playlistConfig) {
        return new Playlist(playlistConfig);
    });

    ...
}

Here, I convert my JSON data into Playlist objects. Each Playlist object is a Backbone.Model.

Here's how my data looks:

And here's what the Playlist constructor looks like:

return function(config) {
    var playlist = new Playlist(config);

    return playlist;
};

var Playlist = Backbone.Model.extend({
    defaults: function() {
        return {
            id: null,
            userId: null,
            title: 'New Playlist',
            selected: false,
            position: 0,
            shuffledItems: [],
            history: [],
            items: Backbone.Collection.extend({
                model: PlaylistItem
            })
        };
    },
    ...
}

My problem:

If I create a Playlist object with defaults, it initializes with an empty Backbone.Collection for PlaylistItem. However, if I create a Playlist object with an already-defined collection, I get a basic array and not a Backbone.Collection. This is because I am working with JSON data from the server which has not been converted to Backbone entities yet. That data is extended over the Playlist's defaults and overwrites the Backbone.Collection entity.

What is a proper way to initialize with a populated Backbone.Collection? I could write code in Initializes which checks the type of my items array and if it is not a Backbone.Collection I could create a new Backbone.Collection and add the items to it and then replace the old array with the new one, but that seems really hoakey.

Answer 1

Don't define your PlalistItems Collection inside defaults, but beforehand. Then, create an initialize method on your Playlist Model like so:

var PlaylistItems = Backbone.Collection.extend({
   ...
});

var Playlist = Backbone.Model.extend({
    initialize: function() {
        this.set('items', new PlaylistItems(this.items));
    },

    defaults: function() {
        return {
            id: null,
            userId: null,
            title: 'New Playlist',
            selected: false,
            position: 0,
            shuffledItems: [],
            history: [],
            items: []  // don't define your PlaylistItems Collection here
        };
}
});

Check out the fiddle here: http://jsfiddle.net/georgedyer/r2XKb/ (you'll need to open the console to see the collection)

Answer 2

Another issue I ran into was after you save your model to the server you will get back a response that will change your embedded collection into a regular javascript array. To remedy this I had to override the parse function on my model class like so:

var model = backbone.Model.extend({
        urlRoot : "/rest/model",

        initialize: function(){
            this.set("myCollection", new MyCollection(this.myArray));
        },

        defaults: {
            myArray: []
        },

        parse: function(response){
            this.set(response);
            this.set("myArray", new MyCollection(response.myArray));
        }
    });