Spotify API 创建临时播放列表未加载 [英] Spotify API Create Temp Playlist Not Loading

问题描述

我正在制作一个小应用程序，显示艺术家相关艺术家的第一首歌曲列表.当我第一次尝试加载我的应用程序时，它什么也没显示.但是，当我重新加载应用程序"时，一切似乎都有效.当我不断开始重新加载"时，它也会不断向列表中添加更多相同的曲目.

I'm making a little app that displays a list of the top first song of an artist's related artists. When I try and load my app for the first time, it shows nothing. But, when I "Reload Application" everything seems to work. When I constantly start "Reloading" it keeps adding more of the same tracks to the list as well.

如何阻止它不断向列表中添加更多曲目并收紧代码以使其在加载时正常工作?

How do I stop it from continually appending more tracks to the list as well as tighten up the code so that it works on load?

require([
  '$api/models',
  '$views/list#List',
  '$api/toplists#Toplist'

  ], function(models, List, Toplist){
    'use strict';

  // Build playlist
  function buildList(trackURIArray){
    var arr = trackURIArray;
    models.Playlist
      .createTemporary("myTempList")
      .done(function(playlist){ 
        playlist.load("tracks").done(function(loadedPlaylist){
          for(var i = 0; i < arr.length; i++){
            loadedPlaylist.tracks.add(models.Track.fromURI(arr[i]));
          }
        });

        // Create list
        var list = List.forPlaylist(playlist,{
          style:'rounded'
        });

        $('#playlistContainer').append(list.node);
        list.init();
      });
  }

  // Get top track
  function getTopTrack(artist, num, callback){
    var artistTopList = Toplist.forArtist(artist);

    artistTopList.tracks.snapshot(0, num).done(function (snapshot){ 
      snapshot.loadAll('name').done(function(tracks){
        var i, num_toptracks;
        num_toptracks = num; 

        for(i = 0; i < num_toptracks; i++){
          callback(artist, tracks[i]);
        }
      });
    });
  }

  // Get Related
  function getRelated(artist_uri){
    var artist_properties = ['name', 'popularity', 'related', 'uri'];

    models.Artist
    .fromURI(artist_uri)
    .load(artist_properties)
    .done(function (artist){

      artist.related.snapshot().done(function(snapshot){
        snapshot.loadAll('name').done(function(artists){
          var temp = [];

          for(var i = 0; i < artists.length; i++){

            getTopTrack(artists[i], 1, function(artist, toptrack){
              var p, n, u;

              p = artist.popularity;
              n = artist.name;
              u = artist.uri;

              temp.push(toptrack.uri);

            });
          }
          // Build a list of these tracks
          buildList(temp);
        });
      });
    });
  }

  getRelated('spotify:artist:2VAvhf61GgLYmC6C8anyX1');
});

推荐答案

通过使用 Promises 您可以延迟列表的渲染，直到您成功地将临时列表与您的曲目组合在一起.此外，为了防止在重新加载时添加重复曲目，请为您的临时播放列表指定一个唯一名称.

By using Promises you can delay the rendering of the list until you have successfully composed the temporary list with your tracks. Also, in order to prevent the addition of repeated tracks on reload, assign a unique name to your temporary playlist.

require([
  '$api/models',
  '$views/list#List',
  '$api/toplists#Toplist'
], function (models, List, Toplist) {
  'use strict';

  // Build playlist
  function buildList(trackURIArray) {
    var arr = trackURIArray;
    models.Playlist
      .createTemporary("myTempList_" + new Date().getTime())
      .done(function (playlist) {
        playlist.load("tracks").done(function () {
          playlist.tracks.add.apply(playlist.tracks, arr).done(function () {
            // Create list
            var list = List.forCollection(playlist, {
              style: 'rounded'
            });

            $('#playlistContainer').appendChild(list.node);
            list.init();
          });
        });
      });
  }

  // Get top track
  function getTopTrack(artist, num) {
    var promise = new models.Promise();
    var artistTopList = Toplist.forArtist(artist);

    artistTopList.tracks.snapshot(0, num).done(function (snapshot) {
      snapshot.loadAll().done(function (tracks) {
        promise.setDone(tracks[0]);
      }).fail(function (f) {
        promise.setFail(f);
      });
    });

    return promise;
  }

  // Get Related
  function getRelated(artist_uri) {
    models.Artist
      .fromURI(artist_uri)
      .load('related')
      .done(function (artist) {
        artist.related.snapshot().done(function (snapshot) {
          snapshot.loadAll().done(function (artists) {

            var promises = [];

            for (var i = 0; i < artists.length; i++) {
              var promise = getTopTrack(artists[i], 1);
              promises.push(promise);
            }

            models.Promise.join(promises)
              .done(function (tracks) {
                console.log('Loaded all tracks', tracks);
              })
              .fail(function (tracks) {
                console.error('Failed to load at least one track.', tracks);
              })
              .always(function (tracks) {
                // filter out results from failed promises
                buildList(tracks.filter(function(t) {
                  return t !== undefined;
                }));
              });
          });
        });
      });
  }

  getRelated('spotify:artist:2VAvhf61GgLYmC6C8anyX1');
});

这篇关于Spotify API 创建临时播放列表未加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！