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

Question

我正在构建一个带有四个选项卡页面的 Spotify 应用程序。所有选项卡的内容都会在应用程序初始加载时加载。每个选项卡都包含一个或多个播放列表，这些播放列表由来自第 3 方 Web API 的数据填充，这些数据被解析为 Spotify 曲目。

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

未完全呈现的播放列表

在检查器中我可以看到内容尚未呈现：

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

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

调整大小后渲染的播放列表

为了填充播放列表，我使用“标准”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。

Answer 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声明，如果没有的话，spotify客户端会做一些奇怪的事情。

Answer 2

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

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

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

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

不知道为什么这样做有效，但它确实有效（至少对我来说）。

Answer 3

我遇到了同样的问题（请参阅 Spotify List 对象创建自localStorage 数据出现空白）并通过在任何处理之前执行 div 的 hide()/show() 来修复它。以前我正在构建播放列表，然后对 div 进行 show() 操作，然后导致出现一个空白列表。

Answer 4

我想我实际上已经成功解决了这个问题，而且我认为这是无懈可击的。

基本上，我试图通过尝试说服 API 它需要通过隐藏事物/滚动事物/移动事物来重新绘制播放列表来解决这个问题，这些事物偶尔会起作用，但从未一致地起作用。我从来没有想过要更改播放列表本身。或者至少让 API 认为播放列表已更改。

您可以通过在 Playlist 对象上触发事件来实现此目的。

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

...

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

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