Html 从localStorage数据创建的Spotify列表对象为空

我正在开发一个Spotify应用程序，试图从数据库中存储的一些信息创建一个views.List对象。在初始加载时，会制作一个POST以获取必要的信息。我将其存储在localstorage中，这样每个后续请求都可以避免命中数据库并在本地检索对象。但是，我从localstorage数据创建的列表对象变为空白，而POST请求工作正常

下面是我用来创建列表的代码段：

var temp_playlist = models.Playlist.fromURI(playlist.uri);
var tempList = new views.List(temp_playlist, function (track) {
    return new views.Track(track, views.Track.FIELD.STAR |
                views.Track.FIELD.NAME |
                views.Track.FIELD.ARTIST |
                views.Track.FIELD.DURATION);
});

document.getElementById("tracklist").appendChild(tempList.node);

第一行中的playlist.uri是我从POST或localstorage中检索的内容。结果views.List对象（templast）在这两种情况下看起来都相同，除了templast.node。从localstorage检索的值在console.log中显示innerHTML、innerText、outerHTML和outerText的以下值：

innerHTML: "<div style="height: 400px; "></div>"
innerText: ""
outerHTML: "<div style="height: 400px; "></div>"
outerText: ""

innerHTML:“
内部文本：“
外层TML:“
outerText:“

而通过POST检索的具有完整数据：

innerHTML: "<div style="height: 400px; "><a href="spotify:track:07CnMloaACYeFpwgZ9ihfg" class="sp-item sp-track sp-track-availability-0" title="Boss On The Boat by Tosca" data-itemindex="0" data-viewindex="0" style="-webkit-transform: translateY(0px); ">....
innerText: "3Boss On The BoatTosca6:082....

innerHTML:“。。。。
innerText:“3船上的老板CA6:082。。。。

等等

---

如果您有任何帮助，我们将不胜感激。

使用本地存储，我是这样做的：

sp = getSpotifyApi(1);
var m = sp.require("sp://import/scripts/api/models");
var v = sp.require("sp://import/scripts/api/views");

var pl;
pl = m.Playlist.fromURI(uri);
var player = new v.Player();
player.track = pl.get(0);
player.context = pl;
var list = new v.List(pl);
XXXXX.append($(list.node));

---

希望，它会有所帮助，因为它为我工作

使用本地存储，我是这样做的：

sp = getSpotifyApi(1);
var m = sp.require("sp://import/scripts/api/models");
var v = sp.require("sp://import/scripts/api/views");

var pl;
pl = m.Playlist.fromURI(uri);
var player = new v.Player();
player.track = pl.get(0);
player.context = pl;
var list = new v.List(pl);
XXXXX.append($(list.node));

希望，它会有帮助，因为它对我有用

解决了这个问题

我正在使用hide（）和show（）呈现我的应用程序中的选项卡。我正在构建轨迹列表，然后显示div，这导致了一个空白的轨迹列表。如果我简单地显示div（）并构造tracklist，它就可以正常工作

它之所以能用于POST（我认为），是因为tracklist是从数据库中检索的，加载时间稍长可能意味着tracklist是在div的show（）执行之后构建的。对于localStorage，我猜tracklist是在显示div之前构建的，这导致了错误

解决了这个问题

我正在使用hide（）和show（）呈现我的应用程序中的选项卡。我正在构建轨迹列表，然后显示div，这导致了一个空白的轨迹列表。如果我简单地显示div（）并构造tracklist，它就可以正常工作

---

它之所以能用于POST（我认为），是因为tracklist是从数据库中检索的，加载时间稍长可能意味着tracklist是在div的show（）执行之后构建的。对于localStorage，我猜tracklist是在显示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功能，列表会更新，因为它认为播放列表中发生了变化。希望这对别人有帮助

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

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

这是可行的，但仅在第一次加载时有效。我的应用程序正在做的是将参数更改为index:id，并加载与该特定id关联的播放列表。如果我加载另一个播放列表（通过更改参数）并再次加载原始播放列表，则原始播放列表将显示为空。当我尝试旋转列表顶部的文章时，也会遇到类似问题。当它调用ajax播放列表加载时，看起来是一个绘图问题。您是否尝试将pl.get（0）放在第一首曲目中？是的，尝试了pl.get（0）但没有帮助。关于绘图问题，您是对的，如果我在“空白”轨迹列表存在时调整Spotify应用程序的大小，轨迹将正确渲染。在一个非常类似的问题中提到了这一点：这是有效的，但仅在第一次加载时有效。我的应用程序正在做的是将参数更改为index:id，并加载与该特定id关联的播放列表。如果我加载另一个播放列表（通过更改参数）并再次加载原始播放列表，则原始播放列表将显示为空。当我尝试旋转列表顶部的文章时，也会遇到类似问题。当它调用ajax播放列表加载时，看起来是一个绘图问题。您是否尝试将pl.get（0）放在第一首曲目中？是的，尝试了pl.get（0）但没有帮助。关于绘图问题，您是对的，如果我在“空白”轨迹列表存在时调整Spotify应用程序的大小，轨迹将正确渲染。在这里的一个非常类似的问题中提到了这一点：