javascript - Converting JSON data to Backbone Model with child Collection - Stack Overflow

admin2025-04-20 0

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.

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:

Share Improve this question edited Aug 7, 2013 at 5:58 Prasanth A R 4,1849 gold badges50 silver badges77 bronze badges asked Jan 21, 2013 at 17:38 Sean Anderson 29.4k33 gold badges132 silver badges242 bronze badges

1 See my answer to this question for a pattern for managing collection properties within models: stackoverflow./questions/14315302/… – jevakallio Commented Jan 21, 2013 at 17:58

Add a ment |

2 Answers 2

Sorted by: Reset to default 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/georgedyer/r2XKb/ (you'll need to open the console to see the collection)

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745084731a284070.html

javascriptConverting JSON data to Backbone Model with child CollectionStack Overflow

最新回复(0)