Backbone - Collection 未从 JSON 填充

Question

我正在尝试从 JSON 中填充一个 Backbone collection 来 spotify API return 我。但是，在我尝试填充 collection 之后，我得到了一个 console.log() ： playlistSpotify child {length: 1, models: Array[1], _byId: Object}。但是我的 collection 应该包含 3 objects（JSON returned 中的 3 objects）。

知道发生了什么事吗？

JS:

• 型号：

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

• Collection :

  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 return 我（我自愿删除一项以使其更短）：

  {
      "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
  }
  

经过一些探索，我在 console.log collection 时看到了 this 东西。我真的不明白发生了什么事。

如有任何帮助，我们将不胜感激！ :)

Answer 1

您创建的实例有误。改成下一个：

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

要初始化集合，您只需将一个对象数组作为参数传递给 collection

的 constructor