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)