Question

我正在构建一个包含四个标签页的Spotify应用程序。在应用程序的初始加载时加载所有选项卡的内容。每个选项卡都包含一个或多个播放列表，这些播放列表中填充了第三方Web apis中已解析为spotify曲目的数据。

所选标签工作正常。播放列表显示出预期。问题在于最初隐藏但稍后被选中的选项卡。选择此处播放列表时如下所示：

在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。

Answer 1

我不确定这是一回事，但我遇到了类似的问题，试图在播放列表中创建跟踪列表;也无法跟踪它（包含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客户端会做一些奇怪的事情。

Answer 2

我发现的解决方案是：

我将其视为显示/隐藏内容的问题，因为显示没有标签的完整内容从不会导致问题。因此，我现在通过将部分的高度设置为100％/ 0来隐藏和显示内容，而不是使用.show（）/。hide（）：

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

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

不确定为什么会这样，但确实如此（对我来说至少）。

Answer 3

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

Answer 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功能和列表更新，因为它认为播放列表中的内容已发生变化。希望这有助于某人！

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

4 个答案: