Spotify App API：标签页、播放列表 UI 刷新

Posted 2023-04-15

【中文标题】Spotify App API：标签页、播放列表 UI 刷新

【英文标题】：Spotify App API: tab pages, playlist UI refresh

【发布时间】：2012-03-12 08:12:24

【问题描述】：

我正在构建一个带有四个标签页的 Spotify 应用程序。所有选项卡的内容都在应用程序的初始加载时加载。每个选项卡都包含一个或多个播放列表，这些播放列表填充了来自 3rd 方 Web api 的数据，这些数据被解析为 spotify 轨道。

选定的选项卡工作正常。播放列表显示预期。问题在于最初隐藏但后来选择的选项卡。选择后播放列表如下所示：

not fully rendered playlist

查看 Inspector 我可以看到内容尚未呈现：

<div class="sp-list sp-light" tabindex="0">
 <div style="height: 100px; ">
 </div>
</div>

当我调整 Spotify 桌面应用程序的大小时，播放列表最终呈现：

rendered playlist after resize

为了填充播放列表，我使用“标准”Spotify 模型和视图：

var playlist = new views.List(tempPlaylist);
//where tempPlaylist is a new models.Playlist();
//that has been populated with tempPlaylist.add(search.tracks[0].uri);

playerPlaylistDiv.append(playlist.node);

我只在使用标签时看到这个问题。在一个长页面上显示所有内容时，所有播放列表都会完全呈现。我想知道这是否与时间有关：我正在隐藏尚未完全呈现的内容？任何想法都非常感谢。

我以这种方式处理标签更改：

/* Handle URI arguments */
models.application.observe(models.EVENT.ARGUMENTSCHANGED, tabs);

/* Handle tab changes */
function tabs() 
  var args = models.application.arguments;
  // Hide all sections
  $('section').hide();

  // Show current section   
  $("#" + args[0]).show();

仅供参考，我正在使用 Spotify 预览版 0.8.10.3。

【参考方案1】：

我不确定这是否相同，但我在尝试从 playlist-uris 动态创建曲目列表时遇到了类似的问题；也无法更近地追踪它（包含的 DOM 肯定已经渲染并准备好了）；它只发生在某些播放列表上，从来没有，例如在专辑上。

我能够通过“克隆”播放列表来规避这个问题 - 显然有一个“性能”命中......

// assuming uri is the playlist's URI
models.Playlist.fromURI( uri, function(originalPlaylist) 
  var tempPlaylist = new model.Playlist(); 
  $.each(originalPlaylist.tracks, function(t)  tempPlaylist.add(t); );
  var tracklist = new views.List(tempPlaylist);
  // etc...
 

我不确定这里有什么，但也许这对你有帮助:)

PS。另外 - 确保你在 index.html () 中有一个 doctype-declaration，如果你没有的话，spotify 客户端会做一些奇怪的事情。

【参考方案2】：

我找到的解决方案是这样的：

我将其归结为显示/隐藏内容的问题，因为在没有标签的情况下显示完整内容永远不会导致问题。因此，我现在不使用 .show()/.hide()，而是通过将部分的高度设置为 100%/0 来隐藏和显示内容：

// Hide all other sections
$("section#" + args).siblings().height('0');

// Show current section
$("section#" + args).height('100%');

不知道为什么会这样，但确实有效（至少对我而言）。

【参考方案3】：

我遇到了同样的问题（请参阅Spotify List objects created from localStorage data come up blank）并通过在任何处理之前执行 div 的 hide()/show() 来修复它。以前我是在构建播放列表，然后显示（）div，然后导致一个空白列表。

【参考方案4】：

我想我实际上已经设法解决了这个问题，而且我认为它是防弹的。

基本上，我试图通过让 API 相信它需要通过隐藏东西/滚动东西/移动偶尔工作但从不始终如一的东西来重绘播放列表来解决这个问题。我从来没有想过要更改播放列表本身。或者至少让 API 认为播放列表发生了变化。

您可以通过在播放列表对象上触发一个事件来做到这一点。

var models = sp.require('$api/models');

...

// playlist is your Playlist object. Usually retrieved from models.Playlist.fromURI
playlist.notify(models.EVENT.CHANGE, playlist);

这些只是标准的 Spotify 功能，并且列表会更新，因为它认为播放列表中的某些内容发生了变化。希望这对某人有帮助！