Question

我正在研究Spotify应用程序并尝试从我们数据库中的一些存储信息创建一个views.List对象。在初始加载时，将进行POST以获取必要的信息。我将其存储在localstorage中，因此每个后续请求都可以避免命中数据库并在本地检索对象。发生了什么事情是我从localstorage数据创建的List对象变成空白，而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中检索的内容。除了tempList.node之外，生成的views.List对象（tempList）在两种情况下看起来都相同。从localstorage检索的那个在console.log中显示innerHTML，innerText，outerHTML和outerText的这些值：

innerHTML: "<div style="height: 400px; "></div>"
innerText: ""
outerHTML: "<div style="height: 400px; "></div>"
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....

依此类推......

非常感谢任何帮助

Answer 1

解决了这个问题。

我正在使用hide（）和show（）来渲染我的应用中的标签。我正在构建轨道列表，然后显示（）显示导致空白轨道列表的div。如果我只是显示（）div然后构建轨道列表它就可以正常工作。

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

Answer 2

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

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));

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

Answer 3

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

基本上我试图通过试图说服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功能和列表更新，因为它认为播放列表中的内容已发生变化。希望这有助于某人！

从localStorage数据创建的Spotify List对象显示为空白

3 个答案: