使用子集合将 JSON 数据转换为主干模型

Question

我正在使用一个 Playlist 对象，该对象具有一些定义自身的属性以及一个 PlaylistItem 集合。

当我从服务器接收数据时，我会在客户端成功方法中获得其 JSON 响应：

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

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

    ...
}

在这里，我将我的 JSON 数据转换为播放列表对象。每个播放列表对象都是一个 Backbone.Model。

我的数据如下所示：

下面是 Playlist 构造函数的样子：

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

我的问题：

如果我使用默认值创建一个播放列表对象，它会使用一个空的 Backbone.Collection 为 PlaylistItem 进行初始化。但是，如果我使用已定义的集合创建一个播放列表对象，我会得到一个基本数组而不是 Backbone.Collection。这是因为我正在处理来自尚未转换为 Backbone 实体的服务器的 JSON 数据。该数据扩展了播放列表的默认值并覆盖了 Backbone.Collection 实体。

使用填充的 Backbone.Collection 进行初始化的正确方法是什么？我可以在 Initializes 中编写代码来检查我的项目数组的类型，如果它不是 Backbone.Collection，我可以创建一个新的 Backbone.Collection 并将项目添加到其中，然后用新的数组替换旧数组，但是看起来真的很虚伪。

Answer 1

不要在默认值中定义您的 PlalistItems 集合，而是事先定义。 然后，在您的播放列表模型上创建一个初始化方法，如下所示：

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

在这里查看小提琴：http://jsfiddle.net/georgedyer/r2XKb/ （您需要打开控制台才能查看收藏）

Answer 2

我遇到的另一个问题是，在您将模型保存到服务器后，您将收到一个响应，该响应会将您的嵌入式集合更改为常规的 javascript 数组。为了解决这个问题，我必须像这样覆盖我的模型类上的解析函数：

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