Backbone - 不从JSON

时间:2015-09-25 13:05:57

标签: javascript json backbone.js populate backbone-collections

我正在尝试从JSON中填充一个Backbone集合,以便将API返回给我。但是,在我尝试填充集合后,我得到了一个console.log(): playlistSpotify child {length: 1, models: Array[1], _byId: Object}。但是我的集合应该包含3个对象(返回的JSON中有3个对象)。

有关正在发生的事情的任何想法?

JS:

  • 型号:

    module.exports = Backbone.Model.extend({
    
        defaults: {
            id: null,
            selected : false,
            name: null
        },
    
        initialize: function() {
    
        }
    });
    
  • 收藏:

    module.exports = Backbone.Collection.extend({
    
        model : Playlist,
    
        initialize: function() {
    
        }
    });
    
  • 查看(只是加载JSON的函数):

    loadSpotifyPlaylists : function() {
        var that = this;
        $.ajax({
            url: 'https://api.spotify.com/v1/users/'+ this.user.get('spotifyId') +'/playlists',
            headers: {
                'Authorization': 'Bearer ' + this.user.get('spotifyToken')
            },
            success: function(response) {
                var playlistCollection = new Playlists2({ collection : JSON.stringify(response.items) });
                var playlistView = new PlaylistSpotifyView({ collection : playlistCollection });
                that.$playListsSpotify.append(playlistView.render().el);
            }
        });
    },
    
  • JSON Spotify返回我(我volontary删除一个项目使其更短):

    {
        "href": "https://api.spotify.com/v1/users/loco/playlists?offset=0&limit=20",
        "items": [
            {
                "collaborative": false,
                "external_urls": {
                    "spotify": "http://open.spotify.com/user/loco/playlist/6MpEay73SWJzyJHGu5u6bK"
                },
                "href": "https://api.spotify.com/v1/users/loco/playlists/6MpEay73SWJzyJHGu5u6bK",
                "id": "6MpEay73SWJzyJHGu5u6bK",
                "images": [
                    {
                        "height": 640,
                        "url": "https://mosaic.scdn.co/640/dc8743ffb149138cfe29334147b835532dbee0ddf3320826…dc7e917657c7982eab6ed5126307c6c3a67e1a3fb78245a8477312eeaec1621a2849969219",
                        "width": 640
                    },
                    {
                        "height": 300,
                        "url": "https://mosaic.scdn.co/300/dc8743ffb149138cfe29334147b835532dbee0ddf3320826…dc7e917657c7982eab6ed5126307c6c3a67e1a3fb78245a8477312eeaec1621a2849969219",
                        "width": 300
                    },
                    {
                        "height": 60,
                        "url": "https://mosaic.scdn.co/60/dc8743ffb149138cfe29334147b835532dbee0ddf33208261…dc7e917657c7982eab6ed5126307c6c3a67e1a3fb78245a8477312eeaec1621a2849969219",
                        "width": 60
                    }
                ],
                "name": "quizz musical",
                "owner": {
                    "external_urls": {
                        "spotify": "http://open.spotify.com/user/loco"
                    },
                    "href": "https://api.spotify.com/v1/users/loco",
                    "id": "loco",
                    "type": "user",
                    "uri": "spotify:user:loco"
                },
                "public": false,
                "snapshot_id": "1OUgCAhN+ZsJo6whDez1kVA/R2DooVY4Rzw+Vij5HYHgz/PDFpjbUaiXz+fkapX7",
                "tracks": {
                    "href": "https://api.spotify.com/v1/users/loco/playlists/6MpEay73SWJzyJHGu5u6bK/tracks",
                    "total": 64
                },
                "type": "playlist",
                "uri": "spotify:user:loco:playlist:6MpEay73SWJzyJHGu5u6bK"
            },
            {
                "collaborative": false,
                "external_urls": {
                    "spotify": "http://open.spotify.com/user/loco/playlist/2KlAANyACpjJZmZfVGK0Mb"
                },
                "href": "https://api.spotify.com/v1/users/loco/playlists/2KlAANyACpjJZmZfVGK0Mb",
                "id": "2KlAANyACpjJZmZfVGK0Mb",
                "images": [
                    {
                        "height": 640,
                        "url": "https://i.scdn.co/image/24e6e9aac4ea49d92e260bb6875f4882c65c7f48",
                        "width": 640
                    }
                ],
                "name": "Playlist2",
                "owner": {
                    "external_urls": {
                        "spotify": "http://open.spotify.com/user/loco"
                    },
                    "href": "https://api.spotify.com/v1/users/loco",
                    "id": "loco",
                    "type": "user",
                    "uri": "spotify:user:loco"
                },
                "public": true,
                "snapshot_id": "fqLltawhg+mMNV+nVEl5Rmj94uDI1kdbbzoZLPbs7uVtZclbYJqyEtIAvIacExVe",
                "tracks": {
                    "href": "https://api.spotify.com/v1/users/loco/playlists/2KlAANyACpjJZmZfVGK0Mb/tracks",
                    "total": 1
                },
                "type": "playlist",
                "uri": "spotify:user:loco:playlist:2KlAANyACpjJZmZfVGK0Mb"
            }
        ],
        "limit": 20,
        "next": null,
        "offset": 0,
        "previous": null,
        "total": 3
    }
    

经过一番探索后,我在控制台时看到了this这个东西。我真的不明白发生了什么。

任何帮助将不胜感激! :)

1 个答案:

答案 0 :(得分:1)

您的实例创建错误。将其更改为下一个:

var playlistCollection = new Playlists2(response.items);
var playlistView = new PlaylistSpotifyView({ model : playlistCollection });

要初始化集合,您只需将一个对象数组作为参数传递给constructor的{​​{1}}