Spotify应用程序API：选项卡页面、播放列表UI刷新

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

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

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

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

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

我通过以下方式处理选项卡更改：

/* 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。

我不确定这是否是同一件事，但我在尝试从播放列表URI动态创建曲目列表时遇到了类似问题；也无法更近地追踪它（包含的DOM肯定已呈现并准备就绪）；它只出现在某些播放列表中，从未出现在专辑中

我可以通过“克隆”播放列表来绕过这个问题-显然有一个“性能”热门

我不确定这是怎么回事，但也许这对你有帮助：）

---

另外，请确保在index.html（）中有doctype声明，否则spotify客户端会做一些奇怪的事情。

我找到的解决方案是：

我把它归结为显示/隐藏内容的问题，因为显示没有选项卡的完整内容不会导致问题。因此，我现在不使用.show（）/.hide（）而是通过将节的高度设置为100%/0来隐藏和显示内容：

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

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

---

不知道为什么会这样，但它确实起作用了（至少对我来说）。

我也有同样的问题（请参阅），并通过在任何处理之前对div执行hide（）/show（）来修复它。之前我正在构建播放列表，然后显示div，然后显示一个空白列表。

我想我已经成功地解决了这个问题，我认为它是防弹的

基本上，我试图通过让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功能，列表会更新，因为它认为播放列表中发生了变化。希望这对别人有帮助

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

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

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

...

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