Spotify的播放列表清晰拖放 [英] Spotify Clear Playlist Drag and Drop
问题描述
当你拖/放一个艺术家到我的应用程序在侧边栏，我建立一个临时的播放列表。我每次拖动一个新的艺术家到我的应用程序，它构建了previous后，一个新的列表，没有清理掉旧的。 （注意有一些code从这里缺少很可能不需要）。
我的问题：我如何清除或删除当前播放列表建成然后建立一个新的，每次我拖/放一个艺术家到我的应用程序的时间？我怀疑它需要内部getRelated（）？
被称为 models.application.addEventListener（'下降'，sidebarDropEventListener）; 功能sidebarDropEventListener（）{
对于（VAR I = 0; I＆LT; models.application.dropped.length;我++）{
VAR draggedItem = models.application.dropped [I]
updateFromDragged（draggedItem.uri）;
}
} 功能updateFromDragged（droppedUri）{
//如果下跌项目是一个艺术家
如果（droppedUri.indexOf（艺术家）＆GT; = 0）{
getRelated（droppedUri）;
}其他{
console.warn（'丢弃的产品不是一个艺术家'）;
}
} //建立播放列表
功能buildList（trackURIArray）{
VAR ARR = trackURIArray; models.Playlist
.createTemporary（myTempList_+新的Date（）。的getTime（））
.done（功能（播放列表）{ playlist.load（轨道）。完成（功能（）{ playlist.tracks.add.apply（playlist.tracks，ARR）.done（函数（）{
//创建列表
VAR列表= List.forCollection（播放）; //填充DOM
$（'＃playlistContainer'）追加（list.node）。
list.init（）;
}）;
}）;
}）;
} //获取相关
功能getRelated（artist_uri）{ models.Artist
.fromURI（artist_uri）
.load（'相关'，'名'）
.done（功能（艺术家）{ artist.related.snapshot（）。完成（功能（快照）{
snapshot.loadAll（）。完成（功能（艺术家）{ VAR承诺= []; 对于（VAR I = 0; I＆LT; artists.length;我++）{
VAR承诺= getTopTrack（艺术家[I]，1）;
promises.push（承诺）;
} models.Promise.join（许诺）
.done（功能（曲目）{
buildList（轨道）;
}）
.fail（功能（曲目）{
buildList（轨道）;
}）;
}）;
}）;
}）;
}
我最终什么事做是创建一个全局变量tempList上方。然后里面储存我的buildList功能的播放列表。里面的updateFromDragged，我只是用tempList.tracks.clear来清除存储的播放列表中的曲目。
我应该用removeTemporary在这里呢？
VAR tempList; //建立播放列表
功能buildList（trackURIArray）{
VAR ARR = trackURIArray;
。VAR日期=新的日期（）的getTime（）; models.Playlist
// prevents附加上刷新新的轨道
.createTemporary（myTempList_+日期）
.done（功能（播放列表）{ //商店创建的播放列表
tempList =播放列表; playlist.load（轨道）。完成（功能（）{ playlist.tracks.add.apply（playlist.tracks，ARR）.done（函数（）{
//创建列表
VAR列表= List.forCollection（播放列表，{
风格：'四舍五入'，
布局：toplist
}）; //隐藏加载
$ loading.hide（）; //填充DOM
$（'＃playlistContainer'）追加（list.node）。
list.init（）;
}）;
}）;
}）;功能updateFromDragged（droppedUri）{ //清除了旧迹
tempList.tracks.clear（）; //使用删除临时那些不以减少资源负荷
models.Playlist.removeTemporary（models.Playlist.fromURI（tempList））; //如果下跌项目是一个艺术家
如果（droppedUri.indexOf（艺术家）＆GT; = 0）{
getRelated（droppedUri）;
}其他{
console.warn（'丢弃的产品不是一个艺术家'）;
} }
When you drag/drop an Artist into my app in the sidebar, I build a temporary playlist. Every time I drag a new Artist into my app, it builds a new list after the previous, WITHOUT clearing out the old one. (Note there is some code missing from here that is probably not needed).
My question: how do I clear out or remove the current built playlist THEN build a new one, every time I drag/drop an Artist into my app? I suspect it would need to be called inside getRelated()?
models.application.addEventListener('dropped', sidebarDropEventListener);
function sidebarDropEventListener() {
for(var i = 0; i < models.application.dropped.length; i++){
var draggedItem = models.application.dropped[i];
updateFromDragged(draggedItem.uri);
}
}
function updateFromDragged(droppedUri) {
// If dropped item is an artist
if(droppedUri.indexOf('artist') >= 0) {
getRelated(droppedUri);
} else {
console.warn('Dropped item is not an artist');
}
}
// Build playlist
function buildList(trackURIArray){
var arr = trackURIArray;
models.Playlist
.createTemporary("myTempList_" + new Date().getTime())
.done(function (playlist){
playlist.load("tracks").done(function() {
playlist.tracks.add.apply(playlist.tracks, arr).done(function(){
// Create list
var list = List.forCollection(playlist);
// Populate DOM
$('#playlistContainer').append(list.node);
list.init();
});
});
});
}
// Get Related
function getRelated(artist_uri){
models.Artist
.fromURI(artist_uri)
.load('related','name')
.done(function (artist){
artist.related.snapshot().done(function (snapshot){
snapshot.loadAll().done(function (artists){
var promises = [];
for(var i = 0; i < artists.length; i++){
var promise = getTopTrack(artists[i], 1);
promises.push(promise);
}
models.Promise.join(promises)
.done(function (tracks){
buildList(tracks);
})
.fail(function (tracks){
buildList(tracks);
});
});
});
});
}
What I ended up doing was creating a global variable "tempList" at the top. Then storing the playlist inside my "buildList" function. Inside "updateFromDragged," I just use "tempList.tracks.clear" to clear out the stored playlist tracks.
Should I use "removeTemporary" here as well?
var tempList;
// Build playlist
function buildList(trackURIArray){
var arr = trackURIArray;
var date = new Date().getTime();
models.Playlist
// prevents appending new tracks on refresh
.createTemporary("myTempList_" + date)
.done(function (playlist){
// Store created playlist
tempList = playlist;
playlist.load("tracks").done(function() {
playlist.tracks.add.apply(playlist.tracks, arr).done(function(){
// Create list
var list = List.forCollection(playlist, {
style: 'rounded',
layout: 'toplist'
});
// Hide loading
$loading.hide();
// Populate DOM
$('#playlistContainer').append(list.node);
list.init();
});
});
});
function updateFromDragged(droppedUri) {
// Clear out old tracks
tempList.tracks.clear();
// Remove the temporary ones not in use to reduce resource load
models.Playlist.removeTemporary( models.Playlist.fromURI(tempList) );
// If dropped item is an artist
if(droppedUri.indexOf('artist') >= 0) {
getRelated(droppedUri);
} else {
console.warn('Dropped item is not an artist');
}
}
这篇关于Spotify的播放列表清晰拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
